Glassmorphism und Farbverläufe: ein praktischer Leitfaden

Glassmorphism ist ein Designstil aus Mattglas: durchscheinende Flächen, die alles dahinter unscharf machen, über einem bunten Hintergrund, meist einem Farbverlauf. Die Fläche behält einen Hauch der Farbe darunter, ein dünner heller Rand fängt das Licht, und die ganze Oberfläche wirkt geschichtet und körperlich. Betriebssysteme nutzen seit Jahren durchscheinende Materialien, und 2025 machte Apple Glas zum Zentrum seiner neuen Designsprache Liquid Glass, der Look verschwindet also nicht. Achtlos eingesetzt entstehen daraus aber graue Kästen und unlesbarer Text.

Warum Glassmorphism einen Farbverlauf braucht

Mattglas sieht nur dann wie Glas aus, wenn dahinter etwas Buntes ist, das sich unscharf machen lässt. Über einem flachen weißen oder grauen Hintergrund ist eine Glasfläche nur ein etwas anderes Grau. Über einem satten Farbverlauf mit Farbflecken an verschiedenen Stellen nimmt die Fläche weiche Farbe auf, die sich von einem Rand zum anderen verschiebt, und diese Verschiebung liest das Auge als Glas. Der Farbverlauf ist also keine Dekoration: Er ist die Hälfte des Effekts.

Die besten Glashintergründe haben kräftige, getrennte Farbbereiche und eine dunkle oder tiefe Basis, ganz ähnlich wie Mesh-Farbverläufe oder Aurora-Farbverläufe. Setze den hellsten Fleck so, dass er teilweise hinter einer Fläche sitzt, die Fläche leuchtet dort, wo sie überlappt.

Das CSS hinter Glassmorphism

Der Kern des Effekts ist backdrop-filter, das einen Filter auf alles hinter einem Element anwendet statt auf das Element selbst. Kombiniere es mit einer halbtransparenten Füllung, einem dünnen durchscheinenden Rand und einem weichen Schatten. Aktuelle Versionen der großen Browser unterstützen es, und ältere Safari-Versionen brauchen das Präfix -webkit-, siehe MDN zu backdrop-filter und caniuse.

.glass {
  background: rgb(255 255 255 / 0.12);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgb(255 255 255 / 0.24);
  border-radius: 20px;
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.25);
  color: #ffffff;
}

/* Without backdrop-filter, use a solid, readable panel instead */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgb(15 23 42 / 0.88); }
}

/* Respect people who ask for less transparency, where supported */
@media (prefers-reduced-transparency: reduce) {
  .glass { background: rgb(15 23 42 / 0.92); }
}

Glassmorphism und Kontrast

Das größte Problem bei Glas ist, dass sein Text auf allem steht, was hinter der Fläche liegt. Eine Überschrift, die über einem dunklen Indigobereich gut lesbar ist, kann verschwinden, wenn die Fläche beim Scrollen über ein blasses rosa Glühen wandert. Der Kontrast muss im schlimmsten Fall halten, nicht in dem aus deinem Entwurf. WCAG verlangt 4,5:1 für Fließtext, prüfe es am hellsten Punkt, der je hinter den Wörtern sitzen kann.

Ein verlässlicher Trick ist, das Glas zur dunkelsten Farbe im Hintergrund hin zu tönen statt Weiß zu nutzen. Ein dunkles, 50-prozentiges Indigo-Glas über einem Farbverlauf aus Indigo und Rosa hält weißen Text überall lesbar und zeigt trotzdem die Farbe durch. Weitere Wege, Wörter klar zu halten, findest du unter Text auf einem Farbverlauf.

Wann Glassmorphism hilft und wann nicht

• Hilft: schwebende Navigation, Dialoge, Mediensteuerung, Karten über einem Hero und Widgets im Stil des Sperrbildschirms, wo sich die Ebene über dem Inhalt anfühlen soll
• Hilft: Produkt- und Launch-Seiten, auf denen der Farbverlauf die Marke ist und das Glas ihn zur Geltung bringt
• Schadet: Formulare, Tabellen und langes Lesen, wo Menschen ruhigen, gleichbleibenden Kontrast brauchen
• Schadet: Seiten mit vielen gestapelten Glasebenen, die trüb wirken und Leistung kosten
• Schadet: überall, wo der Hintergrund flach oder mit Fotos und kleinem Text unruhig ist

So gestaltest du ein Glas-Interface

1. 1

   Zuerst den Hintergrund gestalten

   Wähle einen Farbverlauf mit getrennten Farbflecken auf tiefer Basis. Das Glas ist nur so gut wie das, was dahinter liegt.

2. 2

   Glas auf eine oder zwei Ebenen begrenzen

   Navigation und eine Ebene Karten reichen völlig. Glas auf Glas auf Glas wird grau.

3. 3

   Genug unscharf machen, um Details aufzulösen

   Kannst du hinter der Fläche noch Formen erkennen, erhöhe die Unschärfe vor allem anderen.

4. 4

   Für Kontrast tönen

   Wähle Füllungsfarbe und -deckkraft so, dass Text über dem hellsten Teil des Hintergrunds lesbar bleibt.

5. 5

   Einen hellen Rand und einen weichen Schatten hinzufügen

   Ein durchscheinender 1-px-Rand und ein breiter, schwacher Schatten lassen die Fläche wie eine physische Scheibe wirken.

6. 6

   Die Leistung auf einem Handy testen

   Hintergrund-Unschärfe ist teuer zu zeichnen. Halte unscharfe Bereiche bescheiden und animiere sie nicht auf großen Flächen.

Glas ist eines von mehreren Materialien, die ein Farbverlauf tragen kann, Farbverlauf-Textur vergleicht es mit Körnung, Papier und Seide. Willst du einen Hintergrund, der die Farbflecken, Tiefe und das Licht, die Glas braucht, schon mitbringt, sind viele Marks im Markt so gebaut, und du kannst mit jedem davon kostenlos gestalten.