Générateur CSS Glassmorphism - Constructeur d'Effet Verre Dépoli

Créez des effets CSS de verre dépoli avec aperçu en direct

Outils CSS

Tool

Glass Settings

blur (10px)transparency (0.2)border opacity (0.3)border-radius (16px)

Glass Card

Frosted glass effect

CSS

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

Comment utiliser

1Ajustez l'intensité du flou pour l'effet de verre dépoli
2Réglez la transparence de l'arrière-plan
3Contrôlez l'opacité de la bordure pour le bord du verre
4Définissez le rayon de bordure, puis copiez le CSS

Questions fréquentes

Le glassmorphism est une tendance de design qui utilise des éléments de style verre dépoli — des arrière-plans semi-transparents combinés avec du flou et des bordures subtiles pour créer un effet de profondeur en couches.

backdrop-filter est pris en charge par tous les navigateurs modernes. Le préfixe -webkit-backdrop-filter est encore nécessaire pour les anciennes versions de Safari.