s. smpl.
tools / ● Design / glass-generator

CSS Glassmorphisme.

Générez visuellement des effets CSS verre dépoli pour votre interface utilisateur.

Preview Box

Ajustez trois curseurs — flou, transparence et opacité de bordure — et regardez l'effet verre dépoli se mettre à jour en temps réel sur un fond de prévisualisation coloré. Quand vous êtes satisfait du rendu, copiez le CSS prêt à l'emploi et collez-le directement dans votre feuille de style.

Comment utiliser

Utilisez les trois curseurs pour ajuster la quantité de flou, la transparence et l'opacité de bordure. La boîte de prévisualisation se met à jour en temps réel. Copiez le CSS généré depuis la zone de texte en bas du panneau de contrôles.

Exemples

Verre subtil blur(6px) · opacité 0,15 · bordure 0,08
Dépoli standard blur(10px) · opacité 0,20 · bordure 0,10
Dépoli intense blur(24px) · opacité 0,35 · bordure 0,20

FAQ

Pourquoi l'effet ne ressemble pas à du verre sur mon site ?

Le glassmorphisme nécessite un fond coloré ou basé sur une image derrière l'élément. Sur un fond blanc uni, le flou n'a rien sur quoi agir et l'effet n'est pas visible.

backdrop-filter est-il supporté par tous les navigateurs ?

Oui — dans tous les navigateurs modernes (Chrome, Firefox, Safari, Edge). Le CSS généré inclut automatiquement le préfixe -webkit- pour Safari.

Outils associés

Créateur de Dégradés Créez des dégradés CSS linéaires, radiaux ou coniques avec prévisualisation en direct. Ajustez les couleurs et la direction, puis copiez le CSS. Générateur d'Ombres Générez des box-shadows CSS avec prévisualisation en direct. Ajoutez plusieurs couches d'ombre pour la profondeur et le réalisme, puis copiez le CSS. Encodeur Base64 Encodez ou décodez du texte Base64 instantanément dans votre navigateur. Rien n'est envoyé à aucun serveur.

Confidentialité et données

Cet outil fonctionne entièrement dans votre navegador. Rien de ce que vous tapez ou collez n'est envoyé à un serveur — tout le traitement se fait localement sur votre appareil.