Glassmorphism-Generator
Glassmorphism-Effekt einstellen: Transparenz, Blur, Border, Radius und Schatten – mit Live-Vorschau und CSS-Code.
Der Glassmorphism-Generator erzeugt den Milchglas-Effekt für Karten und Panels: halbtransparenter Hintergrund, Weichzeichnung des Untergrunds mit backdrop-filter, feiner Rahmen, Radius und Schatten. Du stellst alles mit Reglern ein, siehst das Ergebnis vor verschiedenen Hintergründen und kopierst fertigen CSS- oder Tailwind-Code.
Glaskarte
Der Untergrund scheint weichgezeichnet durch. Perfekt für Panels, Navigationsleisten und Overlays.
Mehr erfahren.glass {
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 20px;
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.25);
}Was ist Glassmorphism?
Glassmorphism ist ein Designstil, bei dem Flächen wie mattes Glas wirken: durchscheinend, mit weichgezeichnetem Hintergrund und feinem Rand. Er hebt Karten, Menüs und Dialoge vom Untergrund ab, ohne ihn zu verdecken.
Die Bausteine
| Eigenschaft | Aufgabe |
|---|---|
background mit Alpha | Macht die Fläche durchscheinend |
backdrop-filter: blur() | Zeichnet den Untergrund weich |
border mit Alpha | Simuliert die helle Glaskante |
box-shadow | Löst die Fläche optisch vom Grund |
So gehst du vor
- Regler einstellen und die Vorschau auf verschiedenen Hintergründen prüfen.
- Text-Kontrast an der schwächsten Stelle mit dem Farbkontrast-Prüfer kontrollieren.
- Code kopieren. Passende Hintergründe entstehen im Mesh-Gradient-Generator.
Beispiel
Eine Navigationsleiste mit rgba(255, 255, 255, 0.18), blur(14px) und
einem 1-px-Rahmen in rgba(255, 255, 255, 0.35) lässt das Hero-Bild dahinter
durchscheinen. Zusätzliche Tiefe gibt der Box-Shadow-Generator.
Häufige Fragen
Wie funktioniert Glassmorphism in CSS?
Eine halbtransparente Fläche liegt über einem bunten Hintergrund. Mit backdrop-filter: blur() wird alles, was hinter der Fläche liegt, weichgezeichnet. Ein heller, feiner Rahmen und ein weicher Schatten verstärken den Glaseindruck.
Warum sieht man keinen Effekt?
backdrop-filter wirkt nur, wenn hinter dem Element etwas Sichtbares liegt, etwa ein Verlauf oder ein Bild, und wenn die Fläche teilweise transparent ist. Auf einfarbigem Grund ist der Blur nicht erkennbar.
Welche Browser unterstützen backdrop-filter?
Alle aktuellen Browser. Für ältere Safari-Versionen hilft das Präfix -webkit-backdrop-filter, das der Code bereits enthält. Als Fallback sollte die Fläche auch ohne Blur lesbar sein.
Ist Glassmorphism barrierefrei?
Nur mit Vorsicht. Text auf transparenten Flächen hat je nach Hintergrund wechselnden Kontrast. Prüfe die schwächste Stelle mit dem Farbkontrast-Prüfer und erhöhe bei Bedarf die Deckkraft der Fläche.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.