Glasmorphismus-Generator
Erstelle Mattglas-UI-Karten mit Hintergrundunschärfe, Transparenz und Rahmen und kopiere das CSS.
Glaskarte
Mattglas, das über einem leuchtenden Hintergrund schwebt.
—
Gibt sowohl backdrop-filter als auch -webkit-backdrop-filter aus. Hinweis: backdrop-filter wird in älteren Browsern nicht unterstützt (z. B. Firefox vor Version 103); füge dort einen deckenden Fallback-Hintergrund hinzu.
Über Glasmorphismus-Generator
Der Glasmorphismus-Generator erstellt den Milchglas-Karteneffekt: eine durchscheinende Fläche, die alles dahinter verschwimmen lässt. Schieberegler steuern Unschärfe und Sättigung des backdrop-filter, die Farbe und Transparenz des Glastons, Rahmenfarbe und -deckkraft, den Eckenradius und einen äußeren Schatten — jede Änderung wird live über einem lebhaften Hintergrund gerendert, damit Sie den Effekt realistisch beurteilen können.
Vier Qualitätsvorlagen — dezent, milchig, kräftig und dunkles Glas — liefern bewährte Kombinationen als Ausgangspunkt. Die dunkle Vorlage zeigt, wie sich dasselbe Rezept an dunkle Oberflächen anpasst, wo ein schwacher heller Rahmen einen Großteil der Arbeit übernimmt, das Glas vom Hintergrund abzuheben.
Das generierte CSS enthält sowohl backdrop-filter als auch das von Safari benötigte Präfix -webkit-backdrop-filter. Beachten Sie den Kompatibilitätshinweis: Ältere Browser (zum Beispiel Firefox vor Version 103) unterstützen backdrop-filter nicht, liefern Sie also für sie einen soliden Ersatzhintergrund.
So verwenden Sie Glasmorphismus-Generator
- Beginnen Sie mit einer Vorlage — dezent, milchig, kräftig oder dunkles Glas — oder mit den Vorgaben.
- Passen Sie Unschärfe und Sättigung des Hintergrundfilters an.
- Legen Sie die Glasfarbe und deren Transparenz fest.
- Feinjustieren Sie Rahmenfarbe, Rahmendeckkraft, Eckenradius und den äußeren Schatten.
- Kopieren Sie das CSS — es enthält bereits die -webkit-Präfix-Eigenschaft für Safari.