Glassmorphism-Generator
Der Glassmorphism Generator erzeugt den Milchglas-Effekt mit CSS backdrop-filter und lässt dich Unschärfe, Hintergrund-Deckkraft, Sättigung, Rahmen-Deckkraft, Radius und Tönungsfarbe mit Live-Vorschau anpassen.
Über dieses Tool
Der Glassmorphism Generator erzeugt den Milchglas-Effekt mit CSS backdrop-filter und lässt dich Unschärfe, Hintergrund-Deckkraft, Sättigung, Rahmen-Deckkraft, Radius und Tönungsfarbe mit Live-Vorschau anpassen.
So funktioniert’s
- Wähle die Tönungsfarbe des Glases.
- Passe Unschärfe, Deckkraft und Sättigung an.
- Lege Rahmen-Deckkraft und Eckenradius fest.
- Klicke auf „CSS kopieren“.
Gut zu wissen
- Der Effekt nutzt backdrop-filter: blur() saturate(), das alles hinter dem Element weichzeichnet.
- Ein halbtransparenter Hintergrund (rgba) ist nötig, sonst ist die Unschärfe verdeckt.
- Das erzeugte CSS enthält das Präfix -webkit-backdrop-filter für Safari.
- Glas wirkt am besten über farbigen oder Bild-Hintergründen; auf einfarbigen Flächen ist die Unschärfe nicht sichtbar.
- Behalte den Textkontrast im Blick – durchscheinende Panels können über unruhigen Hintergründen unter den WCAG-Kontrast fallen.
Läuft komplett in deinem Browser – nichts, was du eingibst, wird hochgeladen oder gespeichert.
Häufige Fragen
Wie erstelle ich einen Glaseffekt in CSS?
Gib dem Element einen halbtransparenten Hintergrund wie rgba(255,255,255,0.15) und backdrop-filter: blur(12px); – dieses Tool schreibt dir die vollständige Regel.
Warum funktioniert mein backdrop-filter nicht?
Das Element braucht einen transparenten oder halbtransparenten Hintergrund, und dahinter muss etwas sein, das weichgezeichnet werden kann. Safari braucht außerdem das Präfix -webkit-.
Ist Glassmorphism barrierefrei?
Das kann es sein, wenn der Text ausreichend Kontrast behält. Teste die Textfarben über dem unruhigsten Teil des Hintergrunds.
Beeinträchtigt backdrop-filter die Performance?
Weichzeichnen belastet die GPU stark – wende es also nicht auf sehr große Flächen oder viele Elemente gleichzeitig an, besonders auf einfachen Smartphones.