Zum Inhalt springen

CSS-Glassmorphism-Generator

Erstelle CSS Glassmorphism-Effekte visuell. Passe Unschärfe, Deckkraft, Hintergrundfarbe und Schatten an. Kopiere den CSS-Code. Kostenlos, 100% in deinem Browser.

Vorschau

Glassmorphism
10px
20%
30%

CSS-Ausgabe

 

Was ist Glassmorphism?

Glassmorphism ist ein Design-Trend, der transparente, unscharfe Hintergründe mit subtilen Rändern und Schatten kombiniert, um einen Milchglas-Effekt zu erzeugen. Er wird mit backdrop-filter: blur() und halbtransparenten Hintergründen umgesetzt.

Browser-Unterstützung

backdrop-filter wird von allen modernen Browsern unterstützt. Für ältere Browser empfiehlt es sich, einen Fallback mit halbtransparentem Hintergrund ohne Unschärfe bereitzustellen. Verwende den Vendor-Prefix -webkit-backdrop-filter für maximale Kompatibilität.

Datenschutz

Alle Verarbeitung läuft 100% in deinem Browser. Es werden keine Daten an Server gesendet.