Glassmorphism CSS

Générez le code d'un flou d'arrière-plan et d'une bordure translucide en direct.

Réglages de l'effet

Couleur du verre

#FFFFFF

Opacité de l'arrière-plan15%

Flou d'arrière-plan10px

Saturation180%

Opacité de la bordure30%

Rayon de bordure16px

Opacité de l'ombre10%

Arrière-plan de l'aperçu

Aperçu en direct

CSS

background: rgba(255, 255, 255, 0.15);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.10);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.30);

💡 Conseils

Meilleurs résultats : opacité 10–25 %, flou 5–15 px
Le préfixe -webkit-backdrop-filter est inclus pour la compatibilité avec Safari
Si l'effet paraît terne, vérifiez que le parent a un arrière-plan coloré
Une saturation de 180 % garde des couleurs éclatantes derrière le verre

CSS ET DESIGN SIMILAIRES

Tout voir

Code en image

Transformez vos extraits de code en captures d'écran soignées.

Ouvrir →

Générateur de dégradés CSS

Créez des dégradés linéaires, radiaux et coniques et copiez le CSS aussitôt.

Ouvrir →

Générateur de box-shadow

💬 Commentaires

Aucun commentaire pour le moment. Soyez le premier !

QU'EST-CE QUE Glassmorphism CSS ?

Réglez l'opacité, le flou, la saturation et la bordure pour prévisualiser en temps réel une carte en verre dépoli, puis copiez le CSS, y compris backdrop-filter.

Comment l'utiliser ?

Le panneau de gauche comporte 7 contrôles : opacité, flou, saturation, opacité de la bordure, rayon de bordure, ombre et sélecteur de couleur — tous mettent à jour instantanément la carte d'aperçu.
Meilleurs résultats : opacité de 10–25 % et flou de 5–15 px. Ces deux paramètres ont le plus d'impact sur l'aspect de verre dépoli.
Montez la saturation à 180 % pour des couleurs vives derrière le verre ; l'opacité de la bordure ajoute un fin liseré lumineux à la carte.
Cliquez sur les 6 échantillons d'arrière-plan (Violet, Océan, Coucher de soleil, etc.) pour tester l'effet de verre sur différents dégradés.
Cliquez sur « Copier le CSS » pour obtenir un code prêt pour la production incluant backdrop-filter et -webkit-backdrop-filter (compatible Safari).

Questions fréquentes

Comment l'effet glassmorphism est-il obtenu ?

Avec backdrop-filter: blur() pour le flou d'arrière-plan, une background-color semi-transparente et une bordure discrète.

Est-il pris en charge par tous les navigateurs ?

Bien pris en charge dans Chrome, Edge et Safari. Firefox nécessite un indicateur expérimental. Ajoutez le préfixe -webkit- par sécurité.

Puis-je prévisualiser en temps réel ?

Oui. Tout ajustement d'un curseur ou d'une couleur met à jour l'aperçu instantanément.