Ce site utilise des statistiques de première main respectueuses de la vie privée pour savoir quelles pages et quels outils sont utiles. Aucune donnée n'est partagée avec des traceurs ou publicitaires tiers. Détails de confidentialité

Outils · CSS · Créer un effet glassmorphism

Créer un effet glassmorphism

Créez une carte en verre dépoli avec flou d'arrière-plan, transparence et bordure douce, et copiez le CSS.

Votre résultat apparaît ici

Ajoutez un fichier et lancez l’outil.

Réglages

Ajustez les réglages ci-dessous. Le résultat se met à jour au fur et à mesure.

Déposez un fichier ici, ou choisissez-en un.

Fonctionne entièrement dans votre navigateur. Aucun fichier n'est envoyé.

Fonctionne entièrement dans votre navigateur. Rien n'est jamais envoyé à un serveur.

Comment ça marche

  1. Ajustez le flou, la couleur de teinte, l'opacité de fond, et la saturation.

  2. Affinez l'opacité de la bordure et le rayon des coins pour donner de la profondeur.

  3. Copiez le CSS terminé, y compris la propriété backdrop-filter.

Questions fréquentes

L'effet repose sur backdrop-filter, que certains navigateurs plus anciens ne prennent pas en charge. Là où elle manque, l'aperçu affiche la teinte sans le flou, mais le CSS copié n'est pas affecté et reste correct.

Les deux. backdrop-filter floute tout ce qui se trouve derrière l'élément : une image, un dégradé, ou une autre couleur.

Le CSS généré inclut le préfixe -webkit-backdrop-filter en plus de la propriété standard.

Non. Tout fonctionne dans votre navigateur.

Guides

Un aperçu plus précis de problèmes concrets que résout cet outil.

4 min de lecture

Why Glassmorphism Falls Apart Without Something Behind It

A frosted-glass panel with nothing behind it to blur isn't glass, it's just a translucent grey box. The whole effect depends on real content sitting behind the element - which is also why it's so easy to get wrong.

Lire le guide 4 min de lecture

How to Build Frosted-Glass CSS (Glassmorphism)

Pick a demo backdrop, tune blur, tint, saturation and border, and copy a real, standards-compliant CSS block. What each control changes and why the demo preview is honestly an approximation.

Lire le guide 4 min de lecture

Building a Frosted-Glass Navbar That Doesn't Disappear on Old Browsers

A sticky glass navbar over scrolling content is one of the most common real uses of backdrop-filter, and one of the easiest to get wrong on legibility and older-browser fallback both.

Lire le guide

Outils similaires

Créer une ombre CSS

Créez une ombre CSS multicouche (box-shadow) avec un aperçu en direct, puis copiez le code.

 Créer un dégradé CSS

Créez un dégradé CSS linéaire, radial ou conique, et copiez le code.

 Arrondir les coins en CSS

Façonnez chaque coin d'une boîte séparément, ou fondez-les en une forme organique, et copiez le CSS border-radius.

 Vérifier le contraste des couleurs

Vérifiez si deux couleurs respectent les exigences de contraste WCAG pour le texte et l'interface.

 Convertisseur de couleurs

Convertissez une couleur entre HEX, RGB, HSL et OKLCH, en direct.

 Minificateur et formateur CSS

Minifiez ou mettez en forme du CSS, en direct pendant que vous collez, entièrement dans votre navigateur.

Commentaires

  1. Aucun commentaire pour le moment. Soyez le premier à partager votre expérience.
Votre note (facultatif)

Aucune note sélectionnée