Quick Presets:
Preview Backdrop:
Blur Intensity16px
Background Opacity25%
Tint Color
Border Width1px
Border Opacity30%
Corner Radius24px
OmniCard
Glass UI•••• •••• •••• 2026
CardholderAlex Mercer
Expires12/28
background: rgba(255, 255, 255, 0.25);
border-radius: 24px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.30);Anleitung zum Glassmorphismus-Design
- 1Passen Sie Unschärfe (Blur), Deckkraft und Sättigung über die Schieberegler an.
- 2Verfeinern Sie die dezente Rahmenlinie (Border) und die Hintergrundtönung.
- 3Kopieren Sie das fertige CSS-Snippet inklusive `-webkit-backdrop-filter`.
Moderne UI-Tiefe mit backdrop-filter
Der Milchglaseffekt basiert auf `backdrop-filter: blur(...)` kombiniert mit transluzenten RGBA-Farben und einem zarten 1px-Lichtkanten-Rahmen.
Architecture & Privacy
- Dual backdrop filter declaration: Includes standard backdrop-filter alongside vendor-prefixed -webkit-backdrop-filter for iOS Safari.
- Hardware acceleration optimization: GPU composited layer rendering prevents scroll jank.
- Real-time RGBA alpha channel calculation from standard hexadecimal color selections.
Häufig gestellte Fragen (FAQ)
Verwandte Entwickler-Tools
Popular
CSS-Box-Shadow-Generator (Mehrstufige Weiche Schatten)
Realistische, mehrschichtige Box-Shadows mit weichem Auslauf und Inset-Tiefe gestalten
Launch tool→
Trending
CSS-Farbverlaufs-Generator (Linear & Radial)
Farbverläufe interaktiv zusammenstellen und als performanten CSS-Code exportieren
Launch tool→
CSS-Border-Radius-Generator (Organische 8-Punkte-Formen)
Organische Blobs und asymmetrische Rundungen mit der 8-Werte-Syntax erzeugen
Launch tool→
Reiner CSS-Dreiecks-Generator
Geometrische Pfeile und Dreiecke ohne Bilddateien rein über CSS-Border erzeugen
Launch tool→