Glassmorphism-Generator (Milchglas)
Gestalte Karten und Panels aus Milchglas und sieh das Ergebnis sofort auf verschiedenen Hintergründen. Das CSS enthält das -webkit-Präfix, das Safari noch benötigt.
Zu 100 % in deinem Browser verarbeitet
Der Hintergrund wird hinter dieser Karte unscharf. Passe die Regler an und kopiere das CSS.
Ctrl + Enter ausführenCtrl + C Ergebnis kopieren
So funktioniert es
- 1Wähle die Glasfarbe (Weiß für dunkle, Schwarz für helle Hintergründe).
- 2Passe Transparenz, Unschärfe und Sättigung an, bis der Effekt stimmt.
- 3Füge Rahmen und Schatten hinzu und teste andere Hintergründe.
- 4Kopiere das CSS oder teile einen Link zu deinen Einstellungen.
Anwendungsfälle
- Moderne Karten, Modals und Navigationsleisten.
- Panels über Fotos oder Videos ohne Lesbarkeitsverlust.
- Oberflächen im Stil von macOS, iOS oder Windows 11.
- Schnelle Prototypen für Kundenpräsentationen.
Häufig gestellte Fragen
Was ist Glassmorphism?
Ein visueller Stil, der Milchglas nachahmt: ein halbtransparentes Panel, das den Hintergrund per CSS-Eigenschaft backdrop-filter unscharf zeigt, meist mit dünnem Rahmen und weichem Schatten.
Funktioniert es in allen Browsern?
backdrop-filter funktioniert in aktuellen Versionen von Chrome, Edge, Firefox und Safari. Safari braucht noch das Präfix -webkit-backdrop-filter, das im CSS bereits enthalten ist.
Warum sehe ich den Effekt auf meiner Website nicht?
Die Unschärfe ist nur sichtbar, wenn hinter dem Element detail- oder farbreicher Inhalt liegt (Bild, Verlauf oder Formen). Auf einfarbigem Hintergrund wirkt das Glas wie eine halbtransparente Farbe.
Beeinträchtigt es die Leistung?
backdrop-filter nutzt die GPU. Setze es nur bei wenigen Elementen ein und vermeide sehr starke Unschärfe auf großen Flächen, besonders auf schwächeren Smartphones.