Glassmorphism CSS
Créez un effet verre dépoli (flou d’arrière-plan) avec aperçu live et CSS prêt à copier.
- Instantané
- Gratuit
- Privé (traité localement)
- Sans inscription
Un effet verre, sans tâtonner
Réglez le flou, la transparence, l’arrondi et la bordure : le panneau de verre dépoli se met à jour en direct sur un fond coloré, et le CSS complet (avec préfixe Safari) est prêt à copier.
-
Réglez le flou
L’intensité de l’arrière-plan flouté.
-
Ajustez le verre
Transparence, arrondi, bordure, teinte.
-
Copiez le CSS
À appliquer sur votre carte ou barre.
Le CSS généré (réglages par défaut)
| Propriété | Valeur |
|---|---|
| background | rgba(255, 255, 255, 0.25) |
| backdrop-filter | blur(8px) |
| border-radius | 16px |
| border | 1px solid rgba(255, 255, 255, 0.18) |
Le préfixe -webkit-backdrop-filter est ajouté pour Safari. L’effet n’est visible que sur un arrière-plan non uni. Tout est généré localement.
Questions fréquentes
Qu’est-ce que le glassmorphism ?
Un style d’interface qui imite du verre dépoli : un panneau semi-transparent qui floute ce qui passe derrière, avec une fine bordure claire. Très utilisé pour les cartes, barres et fenêtres modernes.
Comment l’effet est-il obtenu en CSS ?
Avec backdrop-filter: blur(...) qui floute l’arrière-plan, un fond rgba semi-transparent, un border-radius et une bordure rgba claire. L’outil génère ces lignes et leur préfixe -webkit- pour Safari.
Pourquoi l’arrière-plan doit-il être coloré ?
Le flou n’est visible que s’il y a quelque chose à flouter derrière le panneau. Sur un fond uni, l’effet disparaît. L’aperçu place donc le verre sur un dégradé pour bien le montrer.
Est-ce compatible avec tous les navigateurs ?
backdrop-filter est bien pris en charge sur les navigateurs récents (avec -webkit- pour Safari). Sur les très vieux navigateurs, prévoyez un fond de repli un peu plus opaque pour rester lisible.