Design / CSS

Glassmorphism-CSS-Generator (Frosted-Glass-Effekt)

Erstelle den Frosted-Glass-Look mit CSS backdrop-filter: Passe Unschärfe, Tönungsfarbe, Deckkraft, Sättigung, Rand und Eckenradius über einer farbenfrohen Vorschau an und kopiere CSS, das in allen aktuellen Browsern funktioniert.

Glassmorphism-CSS-Generator (Frosted-Glass-Effekt): backdrop-filter: blur() verwischt alles, was hinter dem Element liegt, und saturate() lässt diese Farben kräftiger erscheinen. Ein halbtransparenter Hintergrund färbt das Glas ein, während ein dezenter heller Rand die Kante wie bei echtem Glas hervorhebt. Die Zeile mit dem Präfix -webkit- unterstützt Safari vor Version 18. Läuft zu 100% lokal in deinem Browser, ohne Datei-Uploads zum Server.

Kategorie
Entwicklerwerkzeuge
Ausführungen
In deinem Browser
Kosten
Kostenlos · ohne Anmeldung
Verfügbarkeit
Einsatzbereit
Glassmorphism-GeneratorLokale Verarbeitung

Läuft vollständig in deinem Browser

MilchglasDie Farben hinter dieser Karte sind verschwommen.

CSS

.glass {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

Der Effekt benötigt etwas Buntes hinter dem Element: backdrop-filter verwischt alles darunter, und der halbtransparente Hintergrund lässt es durchscheinen. Die -webkit- Zeile ist für Safari vor Version 18. Achte darauf, dass der Text auf dem Glas über allen Bereichen des Hintergrunds ausreichend kontrastreich bleibt.

Barrierefreiheit

Manche Menschen aktivieren in ihren Systemeinstellungen eine verringerte Transparenz. Die von Chromium-basierten Browsern unterstützte Media Query prefers-reduced-transparency kann für diese Personen das Milchglas durch einen einfarbigen Hintergrund ersetzen.

Mit einem Schatten kombinieren

Ein weicher, breiter Schatten hebt die Karte vom Hintergrund ab. Passe ihn mit dem Box-Shadow-Generator an und ersetze die Zeile mit box-shadow.

So benutzt du es

  1. Lege Unschärfe, Deckkraft und Sättigung fest.
  2. Wähle Tönung, Rand und Eckenradius aus.
  3. Kopiere das CSS und platziere das Element über einem farbenfrohen Hintergrund.

Datenschutz & Einschränkungen

Alles läuft in deinem Browser.

Ähnliche Tools

BoxschattenCSS-FarbverlaufCSS-Muster

Häufige Fragen

Warum wirkt mein Glas schlicht?

Dahinter muss etwas Farbenfrohes oder Detailliertes liegen. Über einer einfarbigen Fläche gibt es für die Unschärfe nichts zu verwischen.

Ist backdrop-filter langsam?

Die Funktion benötigt mehr Leistung als die meisten CSS-Eigenschaften, insbesondere wenn große Bereiche über bewegte Inhalte scrollen. Halte die unscharfen Bereiche klein und vermeide es, viele davon übereinanderzustapeln.

Ist der Text gut lesbar?

Prüfe das Ergebnis: Der Kontrast verändert sich je nach Hintergrund. Eine dunklere Tönung, mehr Deckkraft oder ein Textschatten kann helfen.

Kostenloses Tool · läuft in deinem browser · kein Konto nötig