Glassmorphism CSS: Milchglas-Effekt Schritt für Schritt

Glassmorphism CSS ist der Mattglas-Look, den man von macOS-Panels, iOS-Widgets und modernen Dashboards kennt: eine durchscheinende Karte, die den Hintergrund dahinter verschwimmen lässt. Der gesamte Effekt beruht auf zwei Deklarationen, backdrop-filter: blur() und einem halbtransparenten background, die über einem farbenfrohen Hintergrund liegen. Wenn man diese richtig einsetzt und eine dünne Randhervorhebung hinzufügt, wirkt das Glas echt.

Hier ist der Teil, den die meisten Generatoren auslassen. Die Karte selbst ist die einfachen 20%. Der Grund, warum Ihre Version tot aussieht, während die Dribbble-Shots lebendig wirken, liegt fast immer am Hintergrund hinter dem Glas, nicht am Glas selbst. Diese Anleitung baut den Effekt von Grund auf, behebt die drei Dinge, die ihn billig aussehen lassen, und behandelt die Browserunterstützung, die Sie kennen müssen, bevor Sie die Seite veröffentlichen.

Was Glassmorphism CSS eigentlich ist#

Glassmorphism ist eine matte Glasoberfläche, die durch das Unschärfemachen des Inhalts hinter einem Element entsteht, nicht des Elements selbst. Sie stapeln eine Füllung mit geringer Deckkraft auf backdrop-filter: blur(), fügen einen schwachen hellen Rand hinzu und lassen einen lebendigen Hintergrund durchscheinen. Die Kombination aus Unschärfe und Transparenz erzeugt die Illusion von echtem Glas.

Dieser Unterschied ist wichtig. filter: blur() macht das Element unscharf, auf das Sie es anwenden. backdrop-filter: blur() macht alles unscharf, was dahinter gemalt wurde, und lässt den eigenen Inhalt des Elements scharf. Glassmorphism benötigt die zweite Variante, weshalb ein einziger falscher Eigenschaftsname der häufigste Grund ist, warum der Effekt „nichts tut".

Das Aussehen erfordert drei zwingende Zutaten und eine optionale Verzierung:

• Ein halbtransparenter Hintergrund (normalerweise weiß oder schwarz mit 10 bis 25 % Deckkraft).
• Eine Hintergrundunschärfe, damit der Hintergrund zu einer matten Oberfläche wird.
• Ein lebendiger, mehrfarbiger Hintergrund hinter der Karte, damit es etwas Interessantes zum Unschärfemachen gibt.
• Eine 1px helle Innenrahmen-Hervorhebung, die den Lichteinfall an einer Glaskante imitiert.

Der größte Fehler ist, Glassmorphism über einer flachen oder weißen Seite zu testen. Es gibt nichts zu verwischen, also sieht die Karte wie ein einfaches, deckungsarmes Grau aus. Bauen Sie es immer über einem Farbverlauf oder einem Foto auf.

So erstellst du den Glassmorphism-CSS-Effekt#

Hier ist das vollständige Rezept. Folge den Schritten der Reihe nach, denn jeder behebt eine bestimmte Art und Weise, wie der Effekt flach wirken kann.

Schritt 1: Platziere einen lebendigen Farbverlauf hinter der Karte#

Der Hintergrund leistet den Großteil der visuellen Arbeit. Eine matte Karte vor einer grauen Wand ist grauer Frost. Eine matte Karte vor einem Magenta-zu-Cyan-Verlauf ist der Look, den die Leute tatsächlich wollen. Beginne mit dem Hintergrund, nicht mit der Karte.

body {
  min-height: 100vh;
  background: linear-gradient(135deg, #7b2ff7 0%, #f107a3 50%, #00c6ff 100%);
}

Zwei oder drei gesättigte, kontrastreiche Farbtöne, die miteinander verschmelzen, erzeugen den weichen Farbblüteneffekt, der wie Glas wirkt. Wenn du dir nicht sicher bist, welche Farben nach dem Weichzeichnen halten, erstelle den Hintergrund mit einem kostenlosen CSS-Gradienten-Generator und probiere ein paar Kombinationen aus, bevor du dich festlegst. Matte oder kontrastarme Verläufe werden unter Unschärfe zu Matsch, also teste es.

Schritt 2: Füge die halbtransparente Schicht hinzu#

Jetzt die Karte. Gib ihr eine Füllung, die den Hintergrund durchscheinen lässt. Weiß mit geringer Deckkraft funktioniert auf den meisten Hintergründen; Schwarz mit geringer Deckkraft eignet sich für dunkle oder Neon-Szenen.

.glass {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 2rem;
}

Verwende rgba() (oder die moderne Syntax rgb(255 255 255 / 12%)) anstelle der Eigenschaft opacity. Die Einstellung von opacity blendet das gesamte Element aus, einschließlich seines Textes und seiner Kinder. Du möchtest nur den Hintergrund durchscheinend haben, niemals den Inhalt, der auf dem Glas sitzt.

Schritt 3: Wende die Hintergrundunschärfe an#

Dies ist die Zeile, die eine durchscheinende Box in Milchglas verwandelt.

.glass {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 2rem;
}

Ein Unschärferadius von 8px bis 16px trifft den optimalen Bereich. Unter 6px ist der Frost kaum sichtbar; über 20px löst sich der Hintergrund in Matsch auf und du verlierst das Gefühl, dass sich echter Inhalt hinter dem Glas befindet. Kombiniere die Standardeigenschaft immer mit -webkit-backdrop-filter, da Safari das Präfix noch benötigt.

Schritt 4: Füge die Randhervorhebung hinzu, die den Effekt verkauft#

Hier ist das Detail, das fast jeder Generator weglässt, und es ist der Unterschied zwischen "offensichtlich CSS" und "sieht aus wie echtes Glas". Echtes Glas fängt Licht an seinen oberen und linken Kanten ein. Du simulierst das mit einem schwachen, hellen, halbtransparenten Rand.

.glass {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  padding: 2rem;
}

Der 1px helle Rand wirkt wie der helle Rand einer Glasscheibe. Für eine noch überzeugendere Kante füge eine innere Hervorhebung mit box-shadow hinzu. Die innere weiße Linie imitiert Licht, das entlang der Innenkante gebrochen wird:

.glass {
  /* ...vorherige Eigenschaften... */
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

Diese inset 0 1px 0-Hervorhebung ist die geheime Zutat. Der äußere Schatten hebt die Karte von der Seite ab; die innere Linie verleiht der Oberkante diesen klaren, glasigen Glanz.

Schritt 5: Passe Tiefe und Kontrast an#

Wenn alle vier Zutaten vorhanden sind, passe nach Geschmack an:

• Deckkraft steuert die Frostigkeit. Niedriger (8 bis 12%) ist durchsichtiger; höher (18 bis 25%) ist milchiger und besser lesbar für Text.
• Unschärferadius steuert, wie weich der Hintergrund wird. Mehr Unschärfe bedeutet mehr Sichtschutz und weniger sichtbare Details dahinter.
• Äußerer Schatten steuert, wie weit die Karte über der Seite schwebt. Weiche ihn auf und vergrößere ihn für ein erhabeneres Gefühl.
• Randdeckkraft steuert, wie ausgeprägt der Glasrand aussieht. Hellerer Rand gleich glänzenderes Glas.

Ein vollständiges Copy-Paste-Beispiel#

Hier ist ein voll funktionsfähiger Code-Snippet, den Sie in jedes Projekt einfügen können.

<div class="glass">
  <h2>Frosted-Glas-Karte</h2>
  <p>Hintergrundunschärfe über einem lebendigen Farbverlauf.</p>
</div>

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #7b2ff7 0%, #f107a3 50%, #00c6ff 100%);
}

.glass {
  max-width: 360px;
  padding: 2rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: #fff;
}

Tauschen Sie den Farbverlauf gegen Ihre eigene Palette aus, reduzieren Sie die Deckkraft, falls der Text schwer lesbar ist, und schon haben Sie eine produktionsreife Glaskarte. Wenn Sie dieselben Farbtöne für Buttons, Badges und den Seitenhintergrund wiederverwenden möchten, legen Sie sie mit einem Farbpaletten-Generator für Markendesign fest, damit die gesamte Benutzeroberfläche konsistent bleibt.

Die Eigenschaften, die das Aussehen steuern#

Nutzen Sie dies als Kurzreferenz beim Anpassen einer Glasoberfläche.

Eigenschaft	Wirkung	Typischer Bereich
backdrop-filter: blur()	Macht den Hintergrund hinter der Karte milchig	8px bis 16px
background: rgba()	Setzt die durchscheinende Füllung	0,08 bis 0,25 Alpha
border: 1px solid rgba()	Leichter Rand, der eine Glaskante vortäuscht	0,2 bis 0,3 Alpha
box-shadow (außen)	Hebt die Karte von der Seite ab	weich, groß, niedriger Alpha
box-shadow (innen)	Scharfe innere Hervorhebung an der Oberkante	inset 0 1px 0 weiß
border-radius	Rundet die Ecken (Glas ist selten scharfkantig)	12px bis 24px

Sie können auch backdrop-filter-Werte kombinieren. Ein Hauch von Sättigung lässt die Hintergrundfarben durch den Milchglaseffekt hervortreten: backdrop-filter: blur(12px) saturate(160%). Diese Sättigungssteigerung ist ein beliebter Trick, um das Glas reichhaltiger wirken zu lassen, ohne die eigene Füllung der Karte zu verändern.

Browser-Support und die Fallstricke, die niemand erwähnt#

backdrop-filter wird von modernen Chrome-, Edge-, Safari- und Firefox-Versionen gut unterstützt, aber es gibt echte Fallstricke, die Ihnen in der Produktion Probleme bereiten können.

• Safari benötigt das Präfix. Liefern Sie immer -webkit-backdrop-filter zusammen mit der Standardeigenschaft aus. Ohne das Präfix rendert Safari eine flache, durchscheinende Box ohne Unschärfe.
• Firefox hatte es früher hinter einer Flagge. backdrop-filter ist standardmäßig seit Firefox 103 aktiviert. Ältere Builds hatten es hinter einer Flagge, sodass sehr alte Firefox-Versionen die Füllung, aber keine Unschärfe zeigen. Für die meisten Zielgruppen ist dies kein Problem mehr, aber wenn Ihre Analysen Legacy-Firefox-Traffic zeigen, planen Sie einen Fallback.
• Es ist GPU-intensiv. Jedes backdrop-filter-Element zwingt den Browser, den dahinterliegenden Inhalt neu abzutasten und zu verwischen. Eine Seite mit Dutzenden von unscharfen Karten oder Unschärfe auf einer scrollenden Liste kann auf schwächeren Geräten zu Rucklern führen. Verwenden Sie es auf einigen wenigen Hero-Oberflächen, nicht auf jedem Listenelement.

Das saubere Fallback-Muster ist eine Feature-Abfrage. Geben Sie allen eine lesbare, undurchsichtige Karte und aktualisieren Sie dann nur dort, wo der Browser es unterstützt, zu echtem Frost:

.glass {
  background: rgba(255, 255, 255, 0.7); /* lesbarer Fallback */
}

@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .glass {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

Barrierefreiheitswarnung: Weißer Text mit geringer Deckkraft auf einem unruhigen Farbverlauf kann Kontrastprüfungen nicht bestehen. Glas sieht in Mockups großartig aus, versagt aber bei echten Nutzern. Erhöhen Sie die Deckkraft der Füllung, verdunkeln Sie den Text oder fügen Sie eine subtile, deckende Schicht hinter dem Text hinzu, damit er vor jedem Hintergrund lesbar bleibt.

Wann Sie Glassmorphism einsetzen sollten (und wann nicht)#

Glassmorphism glänzt auf Overlays, die über reichhaltigen Inhalten liegen: Navigationsleisten über einem Hero-Bild, Modals über einem Dashboard, Widget-Karten über einem Farbverlauf. Die Unschärfe erzeugt Tiefe und hält die darunterliegende Ebene schwach sichtbar, genau der räumliche Hinweis, den es vermitteln soll.

Es ist die falsche Wahl, wenn sich nichts Sinnvolles hinter der Karte befindet, wenn die Lesbarkeit von Text entscheidend ist (lange Texte, Datentabellen) oder wenn es hunderte Male auf einer Seite wiederholt wird. In diesen Fällen funktioniert eine solide Karte mit einem weichen Schatten besser und liest sich klarer.

Behandeln Sie Glas wie eine Würze, nicht die ganze Mahlzeit. Ein oder zwei Glasflächen über einem starken Farbverlauf-Hintergrund wirken hochwertig. Zwanzig davon auf einer flachen Seite sehen aus wie ein Fehler.

Fazit#

Glassmorphism CSS ist wirklich einfach, sobald Sie das vollständige Rezept kennen: ein lebendiger Farbverlaufshintergrund, eine halbtransparente Füllung, backdrop-filter: blur() mit dem WebKit-Präfix und ein 1px heller Rand plus ein Inset-Highlight, um die Glaskante vorzutäuschen. Die Karte ist der einfache Teil. Der Hintergrund und der Rand sind es, die es echt aussehen lassen, statt tot.

Beginnen Sie damit, den Farbverlauf perfekt hinzubekommen, denn alles andere wird darauf geschichtet. Erstellen und Vorschau Ihres Hintergrunds im kostenlosen CSS-Farbverlauf-Generator, lesen Sie den tiefergehenden Leitfaden zu modernen CSS-Farbverlaufshintergründen für Palettenideen, und legen Sie dann die Glaskarte darauf. Wenn Sie bereit sind, das Design als flaches Bild auszuliefern, wandelt ein kostenloser SVG-zu-PNG-Konverter Ihre exportierten Vektoren in die benötigten Raster-Assets um.

Häufig gestellte Fragen#

Warum sieht mein Glas-Effekt-CSS flach oder grau aus? Fast immer, weil sich nichts Lebendiges hinter der Karte befindet. Der Milchglaseffekt verwischt den Hintergrund, sodass über einer weißen oder flachgrauen Seite nur ein stumpfes, durchscheinendes Grau entsteht. Platzieren Sie einen gesättigten, mehrfarbigen Farbverlauf oder ein Foto hinter dem Glas, und der Look wird sofort lebendig.

Was ist der Unterschied zwischen filter blur und backdrop-filter blur? filter: blur() verwischt das Element, auf das es angewendet wird, einschließlich seines eigenen Textes und seiner Kindelemente. backdrop-filter: blur() verwischt nur den Inhalt, der hinter dem Element dargestellt wird, während der Inhalt des Elements scharf bleibt. Glassmorphism benötigt backdrop-filter, weshalb die Verwendung des falschen Filters dazu führt, dass der Effekt scheinbar nichts bewirkt.

Funktioniert backdrop-filter in allen Browsern? Es funktioniert in modernen Chrome-, Edge-, Safari- und Firefox-Versionen ab 103. Safari benötigt zusätzlich zur Standardeigenschaft das Präfix -webkit-backdrop-filter, und sehr alte Firefox-Versionen hatten es hinter einem Flag. Verwenden Sie eine @supports-Feature-Abfrage mit einem deckenden Fallback-Hintergrund, um Browser abzudecken, die keine Unterstützung bieten.

Warum sollte ich die opacity-Eigenschaft für Glaskarten vermeiden? Die opacity-Eigenschaft blendet das gesamte Element aus, einschließlich Text oder Schaltflächen auf dem Glas, was den Inhalt unlesbar macht. Verwenden Sie stattdessen einen rgba()- oder rgb()/...-Hintergrundwert, sodass nur die Füllung durchscheinend ist, während der Inhalt vollständig deckend bleibt.

Ist Glassmorphism schlecht für die Leistung? Es kann sein. Jedes backdrop-filter-Element zwingt den Browser, die Pixel dahinter neu abzutasten und zu verwischen, was GPU-intensiv ist. Einige Glasflächen sind in Ordnung, aber das Verwischen von Dutzenden Karten oder die Anwendung innerhalb einer scrollenden Liste kann auf schwächeren Geräten zu Rucklern führen. Verwenden Sie es daher sparsam auf Hero-Elementen.

Wie halte ich Glassmorphism barrierefrei? Achten Sie auf den Textkontrast. Helle Text mit geringer Deckkraft über einem lebhaften Farbverlauf erfüllt oft nicht die WCAG-Kontrastanforderungen. Erhöhen Sie die Deckkraft der Füllung, verdunkeln oder fetten Sie den Text oder fügen Sie eine subtile, deckende Schicht hinter dem Textblock hinzu, damit er unabhängig von der Hintergrundfarbe lesbar bleibt.