Glassmorphism Effekt Generator
Erstellen Sie beeindruckende glasähnliche UI-Effekte mit backdrop-filter.
① Blur & Deckkraft anpassen ② Glasfarbe & Rahmen wählen ③ CSS kopieren
Glassmorphism
backdrop-filter: blur(12px)
Presets:
12px
18%
180%
30%
16px
CSS-Code
.glass {
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.30);
border-radius: 16px;
}Was ist Glassmorphism?
Glassmorphism ist ein UI-Design-Trend, der mit CSS backdrop-filter, halbtransparenten Hintergründen und subtilen Rahmen eine mattglasähnliche Oberfläche erzeugt. Schlüsseleigenschaften: backdrop-filter: blur(12px) saturate(180%) verwischt den Hintergrund. background: rgba(255,255,255,0.18) setzt die transluzente Füllung. border: 1px solid rgba(255,255,255,0.3) fügt den Glasrand hinzu. Safari benötigt -webkit-backdrop-filter. Immer einen @supports-Fallback für ältere Browser einschließen.
Häufig gestellte Fragen
Glassmorphism ist ein UI-Stil, der Mattglas mit CSS backdrop-filter, halbtransparenten farbigen Hintergründen und dünnen durchsichtigen Rahmen simuliert.
Die Kerneigenschaften sind: backdrop-filter: blur(10px) — verschwommener Hintergrund. background: rgba(255,255,255,0.15) — halbtransparenter Hintergrund. border: 1px solid rgba(255,255,255,0.3) — durchsichtiger Rahmen.
backdrop-filter wird in Chrome, Firefox 103+, Edge und Safari (mit -webkit-Präfix) unterstützt. Schließen Sie immer beide Versionen für maximale Kompatibilität ein.
Verwenden Sie @supports: @supports not (backdrop-filter: blur(1px)) { .glass { background: rgba(255,255,255,0.9); } }
Glassmorphism benötigt Inhalt HINTER dem Glas-Element. Auf einem einfarbigen Hintergrund gibt es nichts zu verwischen. Platzieren Sie das Element über einem Bild oder Farbverlauf.
Blur-Werte zwischen 8px und 20px erzeugen das natürlichste Glasaussehen. 10–16px ist der häufige Sweetspot.
Fügen Sie box-shadow hinzu: box-shadow: 0 8px 32px rgba(0,0,0,0.15). Kombinieren Sie innere (inset) und äußere Schatten für einen überzeugenden Glasplatten-Effekt.