Glassmorphism-Generator (Milchglas)
Passe Unschärfe, Transparenz und Rand an, bis die Karte wie Glas über dem Hintergrund aussieht. Wechsle den Hintergrund zum Testen und kopiere das CSS.
So geht’sMilchglas-Effekt
Verfügbar auf: 
Glassmorphism-Generator (Milchglas): wofür es gut ist
Passe Unschärfe, Transparenz, Sättigung, Glasfarbe, Rand und Ecken an. Die Vorschau zeigt die Karte über einem Verlauf mit Formen, einer Landschaft, einem dunklen Hintergrund oder deinem eigenen Foto.
Das CSS kommt mit backdrop-filter und dem Präfix -webkit- für Safari, dazu eine deckendere Ersatzfarbe für Browser ohne Unterstützung der Unschärfe.
So geht’s
- Passe Unschärfe, Transparenz und Rand an.
- Wechsle den Hintergrund der Vorschau oder nutze dein Foto.
- Kopiere das CSS und wende die Klasse glas an.
Wann nutzen
- Kopfzeilen und Menüs mit Glashintergrund.
- Hervorgehobene Karten über Fotos.
- Oberflächen mit modernem Look.
Häufige Fragen
Warum sieht man das Glas nicht?
Der Effekt erscheint nur, wenn hinter der Karte etwas Farbiges oder mit Details liegt: Foto, Verlauf oder Formen. Auf einem schlichten weißen Hintergrund sieht Milchglas nur wie eine weiße Karte aus.
Belastet es die Leistung?
Ein wenig: Der Browser muss das, was dahinter liegt, weichzeichnen. Nutze es bei wenigen Elementen (Kopfzeile, hervorgehobene Karten) und vermeide es in langen Listen oder auf einfachen Handys.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.