Quelle propriété CSS crée l'effet de verre ?

La propriété principale est `backdrop-filter: blur()`, qui applique le flou à la zone derrière l'élément plutôt qu'à l'élément lui-même. Elle est généralement associée à un `background-color` semi-transparent utilisant des valeurs RGBA ou HSLA.

Cela fonctionne-t-il dans tous les navigateurs ?

La plupart des navigateurs modernes supportent `backdrop-filter`. Firefox exige parfois que le drapeau `layout.css.backdrop-filter.enabled` soit défini sur vrai dans les anciennes versions, il est donc recommandé d'inclure une couleur de fond de secours.

Pourquoi le flou n'apparaît-il pas dans mon projet ?

Assurez-vous que l'élément a un arrière-plan transparent ou semi-transparent. Si l'arrière-plan est complètement opaque, l'effet de flou qui se produit derrière l'élément sera masqué.

Puis-je l'utiliser pour les composants d'interface utilisateur en production ?

Oui. Le glassmorphism est un motif de conception courant pour les cartes, les barres de navigation et les modales. Le CSS généré est conforme aux normes et prêt à être utilisé dans n'importe quelle feuille de style.

Couleur & Design

Générateur de Glassmorphism

Frosted-glass UI cards with backdrop-filter.

Runs in your browser

Note de la rédaction

Understanding · Frosted glass, in three CSS properties.

Ce chapitre approfondi n'est actuellement disponible qu'en anglais. L'outil de conversion ci-dessus fonctionne dans votre langue ; le long article explicatif n'a pas encore été traduit.

Questions fréquentes

Quick answers.

›Which CSS property creates the glass effect?

The primary property is `backdrop-filter: blur()`, which applies the blur to the area behind the element rather than the element itself. This is usually paired with a semi-transparent `background-color` using RGBA or HSLA values.

›Does this work in all browsers?

Most modern browsers support `backdrop-filter`. Firefox occasionally requires the `layout.css.backdrop-filter.enabled` flag to be set to true in older versions, so including a fallback background colour is recommended.

›Why does the blur not appear in my project?

Ensure the element has a transparent or semi-transparent background. If the background is fully opaque, the blur effect happening behind the element will be hidden from view.

›Can I use this for production UI components?

Yes. Glassmorphism is a common design pattern for cards, navigation bars, and modals. The generated CSS is standard-compliant and ready for use in any stylesheet.

Les internautes recherchent aussi

Outils similaires

More in this room.

Tout voir dans Couleur & Design