CSS-Glassmorphism-Generator

Dieses Tool erzeugt einen CSS-Milchglas-Effekt (Glassmorphism), indem ein halbtransparenter Hintergrund mit backdrop-filter: blur() kombiniert wird — zieh die Regler über der farbigen Vorschau und beobachte, wie die Glaskarte alles dahinter unscharf macht, dann kopiere den CSS-Code. Das Tool gibt außerdem automatisch das -webkit-backdrop-filter-Präfix aus, das Safari benötigt, da backdrop-filter dort weiterhin darauf angewiesen ist.

Was ist dieses Tool?

Glassmorphism ist ein Interface-Stil, bei dem ein Element wie Milchglas aussieht: Ein halbtransparenter Hintergrund lässt Farben dahinter durchscheinen, während backdrop-filter: blur() diesen Hintergrund weichzeichnet, sodass er wie Glas und nicht wie ein einfaches transparentes Panel wirkt. Ein dünner, halbtransparenter Rand und abgerundete Ecken runden den Look meist ab.

Mit diesem Tool lässt sich dieser Effekt visuell erstellen. Die Vorschau liegt bewusst über einem bewegten Farbverlauf, damit die Weichzeichnung sichtbar wird — Glassmorphism wirkt nur über etwas mit Farbe oder Details im Hintergrund, nicht über einer flachen weißen Seite. Stelle die Deckkraft der Hintergrundfarbe, die Stärke der Weichzeichnung, die Deckkraft des Rands und den Eckenradius ein und kopiere dann den generierten CSS-Code.

Quelle: Filter Effects Module Level 1, W3C — definiert backdrop-filter, die Eigenschaft, auf der dieser Effekt basiert.

Warum sollte man es nutzen?

Live-Vorschau über einem farbigen, animierten Hintergrund, sodass du den Milchglas-Effekt tatsächlich siehst, statt Weichzeichnungswerte vor einem leeren Hintergrund zu erraten.
Volle Kontrolle über Hintergrund-Deckkraft, Weichzeichnungsstärke, Rand-Deckkraft und border-radius an einem Ort.
Gibt automatisch sowohl backdrop-filter als auch das -webkit-backdrop-filter-Präfix aus, damit du die Safari-Unterstützung nicht vergisst.
Läuft komplett in deinem Browser — nichts, was du einstellst, wird irgendwohin hochgeladen.
Kostenlos, keine Anmeldung, funktioniert auf dem Handy.

Anleitung

Wähle eine Hintergrundfarbe und passe ihre Deckkraft an — niedrigere Deckkraft (10–25 %) wirkt wie Glas; höhere Deckkraft sieht eher wie ein solides, eingefärbtes Panel aus.
Erhöhe die Weichzeichnungsstärke, um das, was hinter dem Element liegt, unscharf zu machen — das ist es, was den Milchglas-Look tatsächlich erzeugt, unabhängig von der reinen Transparenz.
Passe die Rand-Deckkraft an, um eine dezente helle Kante hinzuzufügen, die dabei hilft, dass die Glaskarte als eigenständige Fläche wahrgenommen wird, statt mit dem Hintergrund zu verschmelzen.
Stelle den border-radius für abgerundete Ecken ein — Glassmorphism-Karten sind fast immer abgerundet, selten mit scharfen Ecken.
Kopiere den generierten CSS-Code und füge ihn in dein Stylesheet ein. Denk daran, dass das Element etwas mit Farbe oder Textur im Hintergrund braucht — Glassmorphism ist über einem flachen, einfarbigen Hintergrund unsichtbar.

Beispiel

Eingabe

Hintergrund: Weiß bei 20 % Deckkraft · Weichzeichnung: 10px · Rand-Deckkraft: 30 % · Radius: 16px

Ausgabe

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

Ein klassischer Milchglas-Kartenstil, der bei Login-Panels, Navigationsleisten und Dashboard-Widgets über einem farbigen oder fotografischen Hintergrund verwendet wird.

Safari- und Browser-Unterstützung

backdrop-filter wird in aktuellen Versionen von Chrome, Firefox, Edge und Safari unterstützt, aber Safari hat historisch das -webkit-backdrop-filter-Präfix zusätzlich zur unpräfixierten Eigenschaft benötigt, um die Weichzeichnung darzustellen — ohne dieses Präfix ignorieren ältere Safari-Versionen die Weichzeichnung stillschweigend und zeigen nur den flachen, transparenten Hintergrund. Aus diesem Grund gibt dieses Tool immer beide Deklarationen aus.

Aktuelle Details zur Browser-Kompatibilität findest du in der backdrop-filter-Dokumentation von MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

Warum Glassmorphism etwas im Hintergrund braucht

backdrop-filter macht nur das unscharf, was sich visuell hinter dem Element befindet — ein Hintergrundbild, ein Farbverlauf, ein anderes farbiges Element oder Inhalt, der darunter scrollt. Über einem einfarbigen weißen Hintergrund gibt es nichts, was weichgezeichnet werden könnte, sodass der Effekt unsichtbar bleibt und das Element nur wie eine leicht eingefärbte, abgerundete Box wirkt. Platziere Glassmorphism-Elemente daher immer über einem Farbverlauf, einem Foto oder einem anderweitig detailreichen Hintergrund, damit der Effekt zur Geltung kommt.

Kombination mit anderen CSS-Effekten

Glassmorphism-Karten kombinieren häufig eine dezente box-shadow darunter für zusätzliche Tiefe. Erzeuge hier den Milchglas-CSS-Code, füge dann mit dem Box-Shadow-Generator einen weichen Schatten hinzu und wende beide Deklarationen auf dasselbe Element an.

→ Box-Shadow-Generator · Border-Radius-Generator

Häufig gestellte Fragen

Warum wird der Glaseffekt auf meiner Seite nicht angezeigt?

backdrop-filter macht das unscharf, was sich hinter dem Element befindet. Wenn dein Element über einem einfarbigen weißen Hintergrund liegt, gibt es nichts visuell Interessantes zum Weichzeichnen, sodass es nur wie eine schwach eingefärbte Box wirkt. Platziere es über einem Farbverlauf, einem Bild oder einem anderen detailreichen Hintergrund, damit der Milchglas-Effekt sichtbar wird.

Brauche ich das -webkit-backdrop-filter-Präfix?

Ja, wenn der Effekt in Safari zuverlässig dargestellt werden soll. Dieses Tool gibt immer sowohl das Standard-backdrop-filter als auch die mit -webkit- präfixierte Version gemeinsam aus, da Safari historisch das Präfix benötigt hat, um die Weichzeichnung anzuwenden.

Was ist der Unterschied zwischen Hintergrund-Deckkraft und Weichzeichnung?

Die Hintergrund-Deckkraft bestimmt, wie viel von deiner gewählten Einfärbung sichtbar ist im Vergleich dazu, wie viel vom Hintergrund unverändert durchscheint. Die Weichzeichnung bestimmt, wie stark dieser sichtbare Hintergrund verwischt/geglättet wird. Glassmorphism nutzt beides zusammen — etwas Transparenz plus etwas Weichzeichnung — statt nur eines von beiden.

Kann ich backdrop-filter auf jedes Element anwenden?

Ja, aber es wirkt sich nur auf das aus, was sich im Rendering der Seite visuell hinter diesem Element befindet, nicht auf die Kindelemente des Elements selbst. Auf manchen Geräten entsteht zudem ein Performance-Aufwand, wenn es auf viele Elemente angewendet oder häufig animiert wird, daher eignet es sich am besten für eine kleine Anzahl auffälliger UI-Flächen wie Karten, Modals oder Navigationsleisten statt für Dutzende kleiner Elemente.

Warum ist mein Rand kaum sichtbar?

Der Rand in diesem Tool verwendet ein halbtransparentes Weiß, das bewusst dezent gehalten ist — eine helle Kante, die dem Glaspanel hilft, als eigenständige Fläche zu wirken, ohne wie eine harte, deckende Umrandung auszusehen. Erhöhe den Regler für die Rand-Deckkraft, wenn du eine sichtbarere Kante möchtest.