CSS-Glassmorphismus-Generator - Milchglas-Effekt-Ersteller

Erstellen Sie CSS-Milchglas-Effekte mit Live-Vorschau

CSS-Werkzeuge

Tool

Glass Settings

blur (10px)transparency (0.2)border opacity (0.3)border-radius (16px)

Glass Card

Frosted glass effect

CSS

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

Anleitung

1Passen Sie die Unschärfeintensität für den Milchglas-Effekt an
2Stellen Sie die Hintergrundtransparenz ein
3Kontrollieren Sie die Rand-Deckkraft für die Glaskante
4Setzen Sie den Eckenradius und kopieren Sie das CSS

Häufig gestellte Fragen

Glassmorphismus ist ein Designtrend, der Milchglas-Elemente verwendet — halbtransparente Hintergründe kombiniert mit Unschärfe und dezenten Rändern, um einen geschichteten Tiefeneffekt zu erzeugen.

backdrop-filter wird in allen modernen Browsern unterstützt. Das Präfix -webkit-backdrop-filter ist für ältere Safari-Versionen noch erforderlich.