Glasmorphismus-Generator
Erzeugt mit Weichzeichnung, Transparenz und Rand CSS für einen Milchglas-Effekt (Frosted Glass) samt Vorschau und Kopierfunktion
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.
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
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.