Glasmorphismus-Generator
Erzeugt mit Weichzeichnung, Transparenz und Rand CSS für einen Milchglas-Effekt (Frosted Glass) samt Vorschau und Kopierfunktion
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Mit Schiebereglern für Weichzeichnung (Blur), Hintergrundtransparenz, Sättigung und Rand erstellen Sie die aktuell angesagte, halbtransparente Glasoptik (Glasmorphismus) für Ihr UI. In einer Live-Vorschau auf farbigem Hintergrund justieren Sie die Werte und kopieren das CSS zum direkten Einfügen.
Anleitung
- Bewegen Sie die Regler für Weichzeichnung, Hintergrundtransparenz, Sättigung, Eckenrundung und Rand, bis die gewünschte Glasoptik entsteht.
- Passen Sie Glasfarbe und Hintergrundfarbe der Vorschau über die Farbwähler an.
- Prüfen Sie in der Vorschau auf farbigem Hintergrund, ob der Glaseffekt gut zur Geltung kommt.
- Übernehmen Sie das fertige CSS über „CSS kopieren" und fügen Sie es beim gewünschten Element ein.
FAQ
- backdrop-filter wird nicht angewandt.
- Der Weichzeichnungseffekt von backdrop-filter ist nur sichtbar, wenn sich „hinter" dem Element ein Hintergrund (andere Farbe oder Bild) befindet. Auf einer weißen Fläche ohne Hintergrund ändert sich kaum etwas. Für Safari ist -webkit-backdrop-filter zusätzlich enthalten.
- Wird der violette Hintergrund der Vorschau mitkopiert?
- Nein. Die Hintergrundfarbe dient nur der Vorschau, um den Glaseffekt sichtbar zu machen; das kopierte CSS enthält ausschließlich den Stil des Glaselements.
- Sieht es in allen Browsern gleich aus?
- In aktuellem Chrome, Edge, Safari und Firefox funktioniert es gut, doch Unterstützung und Rendering von backdrop-filter können sich je nach Browser und Gerät leicht unterscheiden – prüfen Sie es daher vor dem Einsatz. Alle Berechnungen laufen ohne Serverübertragung ausschließlich im Browser.