Einen Glasmorphismus-Effekt in CSS erstellen
Veröffentlicht am 15. September 2026 · 2 Min. Lesezeit
Der Milchglas-„Glasmorphismus"-Look – ein durchscheinendes, unscharfes Panel, das über einem farbenfrohen Hintergrund schwebt – läuft auf eine bestimmte Kombination aus Hintergrundtransparenz, backdrop-filter-Unschärfe und einem subtilen Rand hinaus. Dieses Tool lässt dich alle drei mit Live-Vorschau einstellen.
Glassmorphism-Generator ausprobierenSchritte
- 1
Den Glasmorphismus-Generator öffnen
Gehe zum Glasmorphismus-Generator.
- 2
Tönung und Transparenz festlegen
Wähle die Grundfarbe des Glaspanels und wie transparent es sein soll.
- 3
Unschärfe und Sättigung anpassen
Stelle die Stärke der Hintergrundunschärfe und einen Sättigungsschub für diesen lebendigen Milchglas-Look ein.
- 4
Das CSS kopieren
Füge die generierten background-, backdrop-filter- und border-Regeln in dein Stylesheet ein.
Häufig gestellte Fragen
Hintergrundunschärfe hat nur eine sichtbare Wirkung, wenn hinter dem Element etwas zum Verwischen ist – ein einfacher solider Hintergrund zeigt den Glaseffekt nicht, daher verwendet die Live-Vorschau einen farbenfrohen Verlauf, um ihn richtig zu demonstrieren.
Es wird in allen modernen Browsern unterstützt; sehr alte Browserversionen rendern die Unschärfe möglicherweise nicht, obwohl der halbtransparente Hintergrund allein immer noch einen vernünftigen Fallback-Look bietet.
Ja – die Randtransparenz ist zusammen mit Unschärfe, Tönung und Sättigung einstellbar, da ein subtiler heller Rand Teil dessen ist, was den Glaslook überzeugend macht.
Da die Vorschau das echte CSS live rendert, kannst du den Effekt feinabstimmen, bis er richtig aussieht, bevor du eine einzige Codezeile kopierst.