Qu'est-ce que le glassmorphisme ?

Une tendance design popularisée par macOS Big Sur et Windows 11 où les surfaces UI ressemblent à du verre dépoli : fond semi-transparent, contenu derrière flouté, bordure subtile pour accrocher la lumière, et ombre douce pour la profondeur. Différent du neumorphisme (qui simule de la 3D avec deux ombres opposées) et du skeuomorphisme (qui imite les matériaux réels en détail).

Pourquoi mon effet ne se voit-il pas dans mon projet ?

Le glassmorphisme a besoin de quelque chose derrière à flouter. Sur une page toute blanche, un fond blanc à 95 % avec backdrop-blur paraît identique à un fond à 95 % sans blur - il n'y a rien à flouter. Posez une image colorée, un dégradé ou un motif chargé derrière la carte ; l'effet apparaît immédiatement.

En quoi est-ce différent d'un fond simplement semi-transparent ?

`background: rgba(255,255,255,0.5)` laisse passer le fond tel quel - lisible sur fond uni, illisible sur fond chargé. `backdrop-filter: blur(20px)` plus un fond translucide floutent le fond *avant* qu'il ne traverse, donc le texte au-dessus reste lisible quelle que soit l'image dessous. C'est le blur qui fait fonctionner le glassmorphisme ; la transparence seule, non.

backdrop-filter est-il supporté partout ?

Chrome, Edge, Safari modernes (avec préfixe `-webkit-` pour les anciennes versions) et Firefox 103+. Firefox plus ancien retombe sur l'absence de blur - le fond traverse alors, simplement net, ce qui passe en général en expérience dégradée. Pour de l'UI critique, ajoutez un fond plus opaque en repli (`background: rgba(255,255,255,0.9)`) pour que le design tienne sans le blur.

Pourquoi est-ce coûteux pour la performance ?

`backdrop-filter: blur()` force le navigateur à allouer un buffer hors écran à la taille de l'élément, à flouter les pixels derrière, puis à composer. Au scroll, ça se passe à chaque frame pour chaque élément en verre visible. Une ou deux cartes en verre par page passent ; une liste de 20 éléments en glass à la fois fera chuter le frame rate sur les portables modestes. Profilez avant de livrer une interface lourde en glass.

Générateur de glassmorphisme

Verre dépoli en CSS avec aperçu en direct - ajustez couleur de fond, backdrop blur, bordure et ombre sur un fond chargé.

Arrière-plan

Couleur de fond

Opacité fond20%

Couleur de bordure

Opacité bordure35%

Backdrop blur16px

Border radius16px

Flou de l'ombre32px

CSS

background: rgba(255, 255, 255, 0.20);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 16px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);

Aperçu

Verre dépoli

Panneaux translucides avec un backdrop blur fort et une bordure subtile.

Glassmorphisme = fond translucide + backdrop blur fort + bordure fine + ombre douce. L'aperçu place votre carte au-dessus d'un fond chargé pour rendre le blur visible (l'effet est invisible sur un fond uni - il a besoin de quelque chose derrière). Les quatre ingrédients ont des curseurs ; l'aperçu se met à jour en direct et le bloc CSS est prêt à copier.

Comment l'utiliser

Choisissez un fond
Basculez entre image, dégradé et motif chargé dans l'aperçu - l'effet verre change de sens à chaque fois.
Réglez transparence + blur
L'alpha du fond contrôle combien le fond apparaît ; le backdrop blur contrôle combien il est adouci. Les deux travaillent ensemble.
Ajoutez bordure + ombre
Une bordure translucide blanchâtre de 1 px donne au verre une arête physique. Une ombre douce le décolle de la surface.
Copiez le CSS
Les quatre déclarations (background, backdrop-filter, border, box-shadow) arrivent en un seul bloc prêt à coller.

Qu'est-ce que c'est ?

Le glassmorphisme est l'esthétique UI en verre dépoli - panneaux translucides soutenus par un fort flou d'arrière-plan. La recette CSS est courte : `background-color` avec alpha < 1, `backdrop-filter: blur(...)`, une bordure fine (souvent `rgba(255,255,255,0.18)`), un `border-radius` généreux et un `box-shadow` doux optionnel pour la profondeur. L'illusion ne marche que s'il y a quelque chose de coloré derrière le panneau pour que le blur agisse - sur fond plat, l'effet se réduit à un simple rectangle translucide.

Quand l'utiliser

Surfaces UI flottantes au-dessus d'images ou vidéos hero, barres de navigation posées sur un fond photo, panneaux modaux au-dessus d'une page floutée en dessous, cartes de pages marketing dont le fond est un dégradé vibrant ou une photo, et overlays type tooltip où l'on veut suggérer un contenu en couche au-dessus plutôt qu'un remplacement de page.

Erreurs courantes

Concevoir la carte en verre sur un fond uni dans Figma, puis être surpris qu'elle disparaisse en prod - testez sur le vrai fond coloré. Empiler du verre sur du verre (la qualité du blur s'effondre et le frame rate chute). Oublier la bordure - sans elle, le verre paraît une tache ; le highlight fin est ce qui se lit comme « bord de verre physique ». Sauter le box-shadow - la profondeur est ce qui sépare le verre du cellophane.

FAQ

Qu'est-ce que le glassmorphisme ?: Une tendance design popularisée par macOS Big Sur et Windows 11 où les surfaces UI ressemblent à du verre dépoli : fond semi-transparent, contenu derrière flouté, bordure subtile pour accrocher la lumière, et ombre douce pour la profondeur. Différent du neumorphisme (qui simule de la 3D avec deux ombres opposées) et du skeuomorphisme (qui imite les matériaux réels en détail).
Pourquoi mon effet ne se voit-il pas dans mon projet ?: Le glassmorphisme a besoin de quelque chose derrière à flouter. Sur une page toute blanche, un fond blanc à 95 % avec backdrop-blur paraît identique à un fond à 95 % sans blur - il n'y a rien à flouter. Posez une image colorée, un dégradé ou un motif chargé derrière la carte ; l'effet apparaît immédiatement.
En quoi est-ce différent d'un fond simplement semi-transparent ?: `background: rgba(255,255,255,0.5)` laisse passer le fond tel quel - lisible sur fond uni, illisible sur fond chargé. `backdrop-filter: blur(20px)` plus un fond translucide floutent le fond *avant* qu'il ne traverse, donc le texte au-dessus reste lisible quelle que soit l'image dessous. C'est le blur qui fait fonctionner le glassmorphisme ; la transparence seule, non.
backdrop-filter est-il supporté partout ?: Chrome, Edge, Safari modernes (avec préfixe `-webkit-` pour les anciennes versions) et Firefox 103+. Firefox plus ancien retombe sur l'absence de blur - le fond traverse alors, simplement net, ce qui passe en général en expérience dégradée. Pour de l'UI critique, ajoutez un fond plus opaque en repli (`background: rgba(255,255,255,0.9)`) pour que le design tienne sans le blur.
Pourquoi est-ce coûteux pour la performance ?: `backdrop-filter: blur()` force le navigateur à allouer un buffer hors écran à la taille de l'élément, à flouter les pixels derrière, puis à composer. Au scroll, ça se passe à chaque frame pour chaque élément en verre visible. Une ou deux cartes en verre par page passent ; une liste de 20 éléments en glass à la fois fera chuter le frame rate sur les portables modestes. Profilez avant de livrer une interface lourde en glass.