Glassmorphism-Generator (Glas-Effekt)
Stelle den Glas-Effekt per Regler ein und kopiere den fertigen CSS-Code – mit Vorschau auf einem farbigen Hintergrund.
Der Hintergrund scheint unscharf durch diese Fläche.
Der Glassmorphism-Generator erzeugt den beliebten Milchglas-Look: eine halbtransparente Fläche, die den Hintergrund unscharf durchscheinen lässt. Du stellst Unschärfe (blur), Deckkraft, Sättigung, Randstärke, Eckenradius und Farbe ein; die Vorschau liegt auf einem bunten Hintergrund. Der CSS-Code enthält backdrop-filter samt -webkit-Präfix und eine Fallback-Hintergrundfarbe.
Bestandteile des Glas-Effekts
| Eigenschaft | Wirkung |
|---|---|
| background: rgba(255,255,255,0.18) | Halbtransparente Fläche |
| backdrop-filter: blur(16px) | Unschärfe des Hintergrunds hinter dem Element |
| saturate(160%) | Kräftigere Farben im unscharfen Hintergrund |
| border: 1px solid rgba(255,255,255,0.3) | Heller Rand wie eine Glaskante |
| box-shadow | Optional weicher Schatten für Tiefe |
So nutzt du den Generator
- Werte einstellenBeginne mit 10–20 px Unschärfe und 10–25 % Deckkraft. Mehr Unschärfe wirkt milchiger, mehr Deckkraft undurchsichtiger.
- Vorschau prüfenDer bunte Hintergrund zeigt den Effekt. Auf einfarbigem Hintergrund ist Glassmorphismus kaum sichtbar.
- CSS einfügenKopiere den Code und setze das Element vor einen Hintergrund mit Farbverlauf, Bild oder anderen Elementen.
Wann Glassmorphismus passt
Der Glas-Effekt erlebte mit iOS und Windows 11 einen neuen Aufschwung und passt zu Dashboards, Karten, Navigationsleisten und Overlays über Bildern oder Verläufen. Er wirkt modern und leicht, benötigt aber einen lebendigen Hintergrund, damit der Effekt sichtbar wird. Problematisch ist die Lesbarkeit: Text auf einer halbtransparenten Fläche muss auf jedem Hintergrundbereich ausreichend Kontrast haben, sonst fällt er durch WCAG. Nutze deshalb kräftigen Text, eine minimal dunklere Tönung der Fläche oder einen Schatten hinter dem Text.
Bedenke die Performance: backdrop-filter zwingt den Browser, den Hintergrund pro Frame zu berechnen. Auf Mobilgeräten und bei Animationen kann das ruckeln.
Tipps
- Kombiniere blur mit saturate(), damit die Farben nicht grau wirken.
- Gib immer eine Fallback-Farbe an (background), falls backdrop-filter fehlt.
- Setze Glasflächen nur dort ein, wo sie Sinn haben (z. B. Navigation), nicht flächendeckend.
- Teste das Design mit Bildern, die helle und dunkle Bereiche haben.
Wo sich der Glassmorphism-Generator lohnt
Der Glas-Effekt wirkt nur dort, wo hinter der Fläche etwas passiert. Du gestaltest die Startseite eines Events und legst eine halbtransparente Karte über den Farbverlauf des Hero-Bereichs: Mit 16 px Unschärfe, 18 % Deckkraft und einem hellen Rand entsteht die Fläche, deren CSS-Code du direkt übernimmst. Für ein Statistik-Panel über einem Produktbild reicht oft schon eine geringere Deckkraft, damit die Zahlen lesbar bleiben.
Auch Überlagerungen profitieren: das Anmeldeformular über einer Bildstrecke, die Navigation über einem bunten Hintergrund oder eine Hinweiskarte in einer Landingpage bekommen Tiefe, ohne dass ein zusätzliches Grafik-Asset entsteht. Eckenradius, Randstärke und Sättigung des Hintergrunds sind regelbar, sodass Karte und Umgebung zusammenpassen; die Unschärfe reicht von 0 bis 40 px. Den passenden Untergrund baust du mit dem Farbverlauf-Generator.
Mögliche Fehler und wie du sie behebst
- Die Fläche wirkt undurchsichtig – Ursache: Die Deckkraft liegt weit über dem üblichen Bereich, die Hintergrundfarbe dominiert. Fix: Deckkraft auf 10 bis 25 % senken und die Unschärfe prüfen.
- In einem älteren Safari fehlt der Effekt – Ursache: Dort wird die Webkit-Variante der Eigenschaft gebraucht. Fix: Beide Zeilen aus dem kopierten Code übernehmen, das Textfeld zeigt sie getrennt an.
- Der Rand ist kaum zu sehen – Ursache: Die Randdeckkraft steht auf 0 %. Fix: Auf 20 bis 30 % anheben, der Regler reicht von 0 bis 80 %.
- Der kopierte Code enthält einen Schatten, den du nicht willst – Ursache: Der Generator ergänzt einen weichen Schatten für die Tiefe. Fix: Die box-shadow-Zeile löschen.
- Die Farben hinter der Fläche wirken grell oder verwaschen – Ursache: Die Sättigung wurde weit außerhalb des üblichen Bereichs verstellt. Fix: Mit 160 % beginnen und schrittweise anpassen.
Für wen sich der Glas-Effekt lohnt
Zuerst profitieren Frontend-Entwickler und Designer, die eine moderne Oberfläche ohne aufwändiges Bildmaterial umsetzen: Der Code umfasst wenige Zeilen, die Werte lassen sich im Stylesheet zentral nachziehen. Agenturen und Freiberufler setzen den Effekt für Landingpages, Produktankündigungen und Event-Seiten ein, wo im Hintergrund ohnehin ein Verlauf oder ein Bild liegt. Auch Studierende lernen mit dem Generator, welche Eigenschaften zum Milchglas-Look gehören.
Der Effekt ist kein Allzweckmittel: Auf einfarbigen Flächen ist er unsichtbar, unter Text leidet die Lesbarkeit, große animierte Bereiche kosten Leistung. Wer nur Tiefe durch Abstand und Schatten braucht, ist mit dem Box-Shadow-Generator besser beraten, runde Ecken dazu erzeugt der Border-Radius-Generator.
Datenschutz & Prüfung: Dieses Tool arbeitet vollständig lokal in deinem Browser – Eingaben und Dateien werden nicht hochgeladen oder gespeichert. Funktion geprüft: Oktober 2026.
Passende Tools
CSS-Farbverlauf-Generator
CSS-Farbverläufe gestalten: linear, radial und konisch mit mehreren Farbstopps – Code zum Kopieren.
Zum Tool DesignCSS-Box-Shadow-Generator
CSS-Schatten gestalten: mehrere Ebenen, Weichzeichnung, Ausbreitung, Farbe und Inset – mit Vorschau.
Zum Tool DesignCSS-Border-Radius-Generator
Abgerundete Ecken und organische Blob-Formen mit border-radius gestalten – mit Live-Vorschau.
Zum ToolHäufige Fragen
Was ist Glassmorphism?
Ein Design-Stil mit halbtransparenten, unscharfen Flächen, die an Milchglas erinnern.
Welche CSS-Eigenschaft erzeugt den Effekt?
backdrop-filter: blur(...). Mit -webkit-backdrop-filter erreichst du auch ältere Safari-Versionen.
Warum sehe ich keinen Effekt?
Hinter dem Element muss etwas Farbiges oder Strukturiertes liegen. Auf einfarbigem Grund bleibt der Effekt unsichtbar.
Ist der Effekt barrierefrei?
Nur wenn der Text ausreichend Kontrast hat. Prüfe ihn auf allen Hintergrundbereichen und erhöhe bei Bedarf die Deckkraft.
Belastet der Effekt die Performance?
Ja, besonders bei großen Flächen und Animationen. Setze ihn gezielt ein.
Werden Einstellungen gespeichert?
Nein, alles läuft lokal.
Alle Tools an einem Ort
Über 100 Rechner für Alltag, Mathematik, Finanzen und mehr – kostenlos, ohne Anmeldung und mit sichtbarem Rechenweg.