Glassmorphism-Generator
Erzeugen Sie einen Milchglas-Effekt (Hintergrund-Unschärfe) mit Live-Vorschau und CSS.
- Sofort
- Kostenlos
- Privat (lokal verarbeitet)
- Ohne Anmeldung
Ein Glaseffekt, ohne Raten
Stellen Sie Unschärfe, Transparenz, Radius und Rahmen ein: das Milchglas-Panel aktualisiert live über buntem Hintergrund, und das vollständige CSS (mit Safari-Präfix) ist kopierbereit.
-
Unschärfe einstellen
Wie stark der Hintergrund verschwimmt.
-
Glas anpassen
Transparenz, Radius, Rahmen, Farbe.
-
CSS kopieren
Auf Karte oder Leiste anwenden.
Das erzeugte CSS (Standardwerte)
| Eigenschaft | Wert |
|---|---|
| background | rgba(255, 255, 255, 0.25) |
| backdrop-filter | blur(8px) |
| border-radius | 16px |
| border | 1px solid rgba(255, 255, 255, 0.18) |
Das Präfix -webkit-backdrop-filter wird für Safari ergänzt. Der Effekt ist nur über nicht-einfarbigem Hintergrund sichtbar. Alles wird lokal erzeugt.
Häufige Fragen
Was ist Glassmorphism?
Ein UI-Stil, der Milchglas nachahmt: ein halbtransparentes Panel, das den Hintergrund verschwimmen lässt, mit einem feinen hellen Rahmen. Häufig für moderne Karten, Leisten und Fenster.
Wie wird der Effekt in CSS erzielt?
Mit backdrop-filter: blur(...), das den Hintergrund weichzeichnet, einer halbtransparenten rgba-Füllung, einem border-radius und einem hellen rgba-Rahmen. Das Tool erzeugt diese Zeilen plus -webkit-Präfix für Safari.
Warum muss der Hintergrund bunt sein?
Die Unschärfe ist nur sichtbar, wenn hinter dem Panel etwas zum Weichzeichnen ist. Auf einfarbigem Grund verschwindet der Effekt. Die Vorschau legt das Glas daher über einen Verlauf.
Ist es mit allen Browsern kompatibel?
backdrop-filter wird in aktuellen Browsern gut unterstützt (mit -webkit- für Safari). Auf sehr alten Browsern planen Sie eine etwas opakere Ersatzfüllung für die Lesbarkeit.