Design / CSS

Générateur CSS de glassmorphism (effet verre dépoli)

Créez un effet verre dépoli avec CSS backdrop-filter : ajustez le flou, la teinte, l’opacité, la saturation, la bordure et l’arrondi des angles sur un aperçu coloré, puis copiez un CSS compatible avec tous les navigateurs actuels.

Générateur CSS de glassmorphism (effet verre dépoli): backdrop-filter: blur() floute ce qui se trouve derrière l’élément, tandis que saturate() intensifie ces couleurs. Un arrière-plan semi-transparent teinte le verre, et une fine bordure claire en souligne le contour, comme sur du verre véritable. La ligne préfixée -webkit- prend en charge Safari avant la version 18. Fonctionne 100 % localement dans votre navigateur, sans aucun téléversement de fichier vers le serveur.

Catégorie: Outils développeur
Exécutions: Dans votre navigateur
Coût: Gratuit · sans inscription
Disponibilité: Prêt à l'emploi

Générateur de glassmorphismTraitement local

Fonctionne entièrement dans votre navigateur

Verre dépoliLes couleurs derrière cette carte sont floutées.

Teinte#ffffffOpacité25%Flou12 pxSaturation180%Opacité de la bordure30%Rayon des angles16 px Ombre

CSS

.glass {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

Cet effet nécessite un élément coloré derrière lui : backdrop-filter floute ce qui se trouve dessous, tandis que l’arrière-plan semi-transparent le laisse transparaître. La ligne -webkit- est destinée aux versions de Safari antérieures à la version 18. Vérifiez que le texte sur le verre conserve un contraste suffisant sur toutes les parties de l’arrière-plan.

Accessibilité

Certaines personnes activent la réduction de la transparence dans les réglages de leur système. La requête média prefers-reduced-transparency, prise en charge par les navigateurs basés sur Chromium, peut remplacer le verre par un arrière-plan uni pour ces personnes.

Associer une ombre

Une ombre douce et étendue détache la carte de l’arrière-plan ; ajustez-la avec le générateur d’ombres portées, puis remplacez la ligne box-shadow.

Comment l'utiliser

Réglez le flou, l’opacité et la saturation.
Choisissez la teinte, la bordure et l’arrondi des angles.
Copiez le CSS et placez l’élément sur un arrière-plan coloré.

Confidentialité et limitations

Tout s’exécute dans votre navigateur.

Outils associés

Questions fréquentes

Pourquoi mon verre paraît-il uniforme ?

Il doit y avoir quelque chose de coloré ou de détaillé derrière lui ; sur une couleur unie, le flou n’a rien à flouter.

backdrop-filter est-il lent ?

Il demande davantage de ressources que la plupart des propriétés CSS, en particulier lorsque de grandes zones défilent au-dessus d’un contenu animé ; gardez les zones floutées petites et évitez d’en empiler beaucoup.

Le texte est-il lisible ?

Vérifiez-le : le contraste varie selon l’arrière-plan. Une teinte plus sombre, une opacité plus élevée ou une ombre portée sur le texte peuvent aider.

Outil gratuit · dans votre navigateur exécutions · aucun compte requis