Question 1

Qu'est-ce que le glassmorphisme ?

Accepted Answer

Le glassmorphisme est une tendance de design UI qui donne aux éléments une apparence de verre dépoli — semi-transparent avec un fond flou, des bordures subtiles et une ombre légère. Il est devenu populaire avec macOS Big Sur et est largement utilisé dans les cartes, modales et barres de navigation.

Question 2

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

Accepted Answer

La propriété backdrop-filter: blur() applique un flou à tout ce qui se trouve derrière l'élément. Combinée avec un fond semi-transparent (par ex., rgba(255,255,255,0.2)), elle crée l'aspect verre dépoli.

Question 3

Le glassmorphisme fonctionne-t-il dans tous les navigateurs ?

Accepted Answer

backdrop-filter est supporté dans tous les navigateurs modernes (Chrome, Firefox, Safari, Edge). Firefox nécessitait un drapeau jusqu'à la version 103. Pour les navigateurs plus anciens, le préfixe -webkit-backdrop-filter peut être nécessaire pour Safari.

Question 4

Quand devrais-je éviter le glassmorphisme ?

Accepted Answer

Évitez le glassmorphisme quand l'accessibilité est prioritaire — les fonds semi-transparents peuvent créer un faible contraste de texte. Évitez-le aussi sur les fonds de couleur unie où il n'y a rien à flouter.

Générateur CSS de Glassmorphisme

Contrôles

Glassmorphism

Comment utiliser

Related Tools

Générateur CSS de Glassmorphisme

Contrôles

Glassmorphism

Comment utiliser

Related Tools