Glassmorphism-CSS-Generator
Erstelle Milchglas-Karten mit Live-Vorschau.
Passe Blur, Tönungs-Deckkraft, Eckenradius und Rahmen einer Glassmorphism-Karte an, betrachte sie live auf farbigem Hintergrund und kopiere das komplette CSS.
Hintergrundfarbe
Glastönung
12px
25%
20px
50%
background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.50); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
So erstellst du Glassmorphism
- Wähle eine Hintergrundfarbe hinter der Glaskarte.
- Wähle die Tönungsfarbe und lege ihre Deckkraft fest.
- Passe Blur, Rahmen-Deckkraft und Radius mit den Schiebereglern an.
- Kopiere das erzeugte CSS in dein Projekt.
Häufig gestellte Fragen
Was ist Glassmorphism?
Ein UI-Stil, der Milchglas nachahmt: ein halbtransparentes Panel über farbigem Hintergrund, weichgezeichnet durch einen Hintergrund-Blur.
Warum stehen zwei Blur-Eigenschaften im CSS?
Die webkit-präfixierte Eigenschaft sorgt dafür, dass der Effekt in Safari und anderen Browsern funktioniert, die ihn benötigen.
Funktioniert backdrop-filter überall?
Von allen modernen Browsern unterstützt. Sehr alte Browser zeigen ein einfaches halbtransparentes Panel ohne Blur.