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);Comment créer un effet de verre dépoli
- 1Ajustez le flou (Blur), l'opacité et la saturation à l'aide des curseurs.
- 2Personnalisez la couleur de fond et la fine bordure lumineuse.
- 3Copiez le code CSS prêt à l'emploi incluant les préfixes Safari.
Effet de Profondeur dans les UI Modernes
Le glassmorphisme repose sur `backdrop-filter: blur(...)` associé à des couleurs translucides RGBA et une fine bordure de 1px.
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.
Foire Aux Questions (FAQ)
Outils Similaires
Popular
Générateur d'Ombres CSS Multicouches (box-shadow)
Créez des ombres portées réalistes, diffuses et élégantes avec profondeur inset
Launch tool→
Trending
Générateur de Dégradés CSS (Linéaire & Radial)
Composez des dégradés linéaires, radiaux et coniques avec export CSS instantané
Launch tool→
Générateur de Rayon de Bordure CSS Organique (8 Valeurs)
Créez des formes organiques et asymétriques grâce à la syntaxe avancée à 8 valeurs
Launch tool→
Générateur de Triangles CSS Purs
Générez des flèches et triangles géométriques purs avec les bordures CSS sans aucune image
Launch tool→