Vorgaben
Glas
background: rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
Was es tut
Erzeugt Frosted-Glass-CSS (Glassmorphism) — Backdrop-Blur, ein translucenter Hintergrund, ein dezenter Rahmen und ein weicher Schatten. Stelle Blur, Opazität, Tönung, Radius, Rahmen und Sättigung ein, sieh das Ergebnis live in der Vorschau und kopiere den kompletten Deklarationsblock. 100 % clientseitig.
So verwendest du es
- Passe die Slider an: Blur, Opacity, Border, Radius, Saturation.
- Wähle eine Tint-Farbe.
- Copy das CSS.
Beispiele
Blur 12, Opazität 0.6, Tönung Weiß, Radius 16 →
background: rgba(255, 255, 255, 0.6);
-webkit-backdrop-filter: blur(12px) saturate(180%);
backdrop-filter: blur(12px) saturate(180%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);Gut zu wissen
- Privat: die Erzeugung läuft lokal.
backdrop-filterbraucht einen farbigen oder Bild-Hintergrund hinter dem Element, damit der Effekt sichtbar wird.- Verwandte Tools: Box-Shadow Generator, CSS Gradient Generator.