Fondamentaux

Boutons Texte & Typo Formulaires Navigation & UI Chargement

Design & Visuels

Backgrounds Glass & Morphism Effets Visuels Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Profondeur Curseurs

Galerie & Plus

Cartes & Layouts Galerie & Média Data & Visualisation Atmosphère Utilitaires
Tous les effets Nouveautés Favoris Templates Blog Astuces ✨ Passer Premium
CartesGratuit

Glassmorphism

Verre dépoli CSS pur : backdrop-filter blur sur fond semi-transparent, reflet diagonal via ::before et ombre portée — aucun JavaScript requis.

CSSGlassModern
Glass
Survolez ou cliquez la scène pour interagir

Cet effet est gratuit — la catégorie Cartes en contient 41 au total, dont 6 gratuits. Effect.Labs regroupe 811 effets vanilla. Découvrir la catégorie →

Voir dans le catalogue Compte gratuit

Exemples d'usage

① Navigation flottante — Barre de menu glass sur fond dégradé

QuandQuand un header fixe ou sticky doit rester lisible tout en laissant transparaître la couleur du hero ou d'une image en cours de défilement.
PourquoiLe blur filtre dynamiquement le contenu en mouvement derrière la barre — l'effet est maximal sur des fonds vivants. Le contour givré ajoute de la profondeur sans masquer l'image de fond.
Réglagesblur(16px) pour une transparence aérienne, rgba(255,255,255,0.08) pour le fond, border-radius: 0 sur le nav pour les bords droits.

② Carte KPI — Dashboard analytique sombre

QuandDans un tableau de bord dark avec des spots de couleur en fond, quand les cartes de métriques doivent rester lisibles tout en reflétant l'ambiance visuelle environnante.
PourquoiLa transparence laisse deviner les teintes du fond adjacent, créant une cohérence visuelle sans surcharge graphique. Le reflet diagonal haut-gauche renforce la perception de profondeur.
Réglagesblur(20px), fond rgba(255,255,255,0.05), box-shadow rgba(0,0,0,0.4) 0 8px 32px, bord à rgba(255,255,255,0.08).

Chiffrement de bout en bout

Vos données sont chiffrées avant de quitter votre appareil. Personne, pas même nous, ne peut les lire.

③ Carte feature — Page marketing dark avec motif géométrique

QuandSur une page de pricing ou de présentation de fonctionnalités dark, pour mettre en valeur chaque feature card sur un fond texturé ou à motif de points.
PourquoiLe pseudo-élément ::before (reflet haut-gauche) simule un spot lumineux et donne du relief sans ombre lourde. L'effet est discret sur fond peu contrasté, spectaculaire sur fond coloré.
Réglagesblur(24px), fond rgba(255,255,255,0.06), bord rgba(255,255,255,0.12) légèrement plus visible, border-radius: 20px.

Comment ça marche

Le cœur de l'effet est backdrop-filter: blur(20px) appliqué à .card-glass. Cette propriété GPU demande au navigateur de flouter tout le contenu rendu derrière l'élément dans le stacking context — à la différence d'un filter: blur() qui s'appliquerait à l'élément lui-même. Pour être perceptible, la scène de fond doit être suffisamment colorée ou contrastée.

Le fond semi-transparent background: rgba(255,255,255,0.05) laisse filtrer la couleur du blur, tandis que border: 1px solid rgba(255,255,255,0.1) trace le contour givré. Le box-shadow à 30 % d'opacité crée la profondeur qui décolle la carte de son arrière-plan sans écraser le blur.

Le pseudo-élément .card-glass::before ajoute un reflet de lumière diagonal : linear-gradient(135deg, rgba(255,255,255,0.10) 0%, transparent 50%). Il couvre le quadrant haut-gauche uniquement, imitant l'inclinaison d'une surface de verre sous un éclairage frontal. pointer-events: none garantit qu'il ne capture aucun clic ; border-radius: inherit lui fait adopter l'arrondi du parent.

La déclaration position: relative sur .card-demo est indispensable : elle crée le contexte de positionnement pour le ::before. Le fond de démo .demo-preview.glass-bg fournit le gradient violet-fuchsia — en production, remplacez-le par n'importe quel fond coloré, image ou vidéo.

Accessibilité

  • prefers-reduced-motion : non applicable — l'effet est entièrement statique, aucune animation ni transition n'est définie dans le code fourni.
  • Aucun attribut aria-* ni role n'est présent dans le HTML de l'effet. Si la carte est décorative, ajoutez aria-hidden="true" ; si elle est interactive, ajoutez role="button" et tabindex="0".
  • Le contraste texte/fond dépend du contenu rendu derrière la carte, qui varie à l'exécution — prévoir une couleur de texte garantissant ≥ 4,5:1 (WCAG AA) dans le cas le plus défavorable.
  • La propriété cursor: pointer héritée de .card-demo suggère un élément cliquable — la retirer ou ajouter un handler clavier (Enter/Space) si la carte est réellement interactive.
  • backdrop-filter n'est pas rendu en mode forced-colors (Windows Contraste Élevé) : prévoir un fond solide de repli via @media (forced-colors: active) { .card-glass { background: ButtonFace; } }.

Compatibilité navigateur

Nécessite backdrop-filter — supporté nativement dans tous les navigateurs modernes. Aucune dépendance JavaScript.

Chrome 76+✓ Complet
Firefox 103+✓ Complet
Safari 9+✓ Complet (webkit)
Edge 79+✓ Complet
Mobile iOS✓ Complet (webkit)
Android Chrome✓ Complet

Sans backdrop-filter (Firefox < 103 sans flag, Opera Mini), la carte conserve son fond rgba(255,255,255,0.05) et sa bordure — l'aspect givré disparaît mais la transparence légère reste. Utilisez @supports (backdrop-filter: blur(1px)) pour appliquer un fond plus opaque en fallback.

Le code

Copiez les trois blocs dans votre page. Aucune dépendance.

HTML 
<div class="glass-bg" style="width:100%;min-height:300px;">
  <div class="card-demo card-glass">
    Glass
  </div>
</div>
CSS 
.card-demo  {
   width: 280px;
   height: 180px;
   background: var(--bg-card);
   border-radius: var(--radius-xl);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
   position: relative;
   cursor: pointer;
   }

.card-glass  {
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 32px;
   }

.card-glass::before  {
   content: "";
   position: absolute;
   inset: 0px;
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
   border-radius: inherit;
   pointer-events: none;
   }

.glass-bg  {
   background: linear-gradient(135deg, rgb(102, 126, 234) 0%, rgb(118, 75, 162) 50%, rgb(240, 147, 251) 100%);
   }

/* Variables du design system du site, dont ce code depend. Sans elles,
   l'acheteur obtenait des coins carres et des couleurs par defaut (revue Owen).
   Valeurs reprises de css/style.css — a adapter librement. */
.glass-bg {
  --bg-card: #12121a;
  --radius-xl: 1rem;
}
JavaScript (fx-0129) 
// Effet CSS pur — pas de JavaScript nécessaire

Personnaliser

Options passées à l'API ou attributs data-* :

Option / propriétéDéfautEffet
backdrop-filter: blur(20px) 20px Niveau de flou en px dans .card-glass — 10px pour un effet subtil, 40px pour un verre épais et fortement dépoli.
background: rgba(255,255,255,0.05) dans .card-glass 0.05 Opacité du fond — monter à 0.08–0.15 pour plus de lisibilité sur fond clair ou peu contrasté.
border: 1px solid rgba(255,255,255,0.1) dans .card-glass 0.1 Visibilité du contour givré — monter à 0.2 pour un bord plus marqué, réduire à 0.05 pour le rendre quasi invisible.
box-shadow: rgba(0,0,0,0.3) 0px 8px 32px dans .card-glass 0.3 / 8px Profondeur et portée de l'ombre — augmenter l'opacité et le blur-radius pour éloigner davantage la carte de son fond.
rgba(255,255,255,0.1) dans .card-glass::before 0.1 Intensité du reflet diagonal haut-gauche — monter à 0.18 pour un aspect brillant, réduire à 0.03 pour le supprimer quasi totalement.
linear-gradient(135deg) dans .card-glass::before 135deg Angle du reflet — 135° = lumière du haut-gauche. 45° = reflet bas-droit, 90° = reflet latéral droit.
border-radius dans .card-demo var(--radius-xl) Arrondi des coins — remplacer par une valeur fixe en px (ex. 16px, 24px) si la variable CSS du projet n'est pas définie.

FAQ

backdrop-filter est-il supporté dans tous les navigateurs modernes ?

backdrop-filter est supporté nativement depuis Chrome 76, Edge 79, Safari 9 (préfixe -webkit-) et Firefox 103. Pour les anciens Firefox (< 103 sans flag), utilisez @supports (backdrop-filter: blur(1px)) { .card-glass { backdrop-filter: blur(20px); } } et définissez un fond plus opaque (rgba(0,0,0,0.55)) en dehors du @supports.

L'effet est-il visible sur n'importe quel fond ?

Non — backdrop-filter: blur() n'est perceptible que si le contenu derrière la carte est suffisamment coloré ou contrasté. Sur un fond blanc ou quasi uniforme, le blur sera invisible. L'effet est à son maximum sur des gradients vifs, des images ou des fonds animés (vidéo, canvas).

Comment superposer plusieurs cartes glass sans effets de flou cumulatifs ?

Chaque élément avec backdrop-filter crée un stacking context indépendant et flou tout ce qui est derrière lui dans l'ordre de rendu — y compris d'autres cartes glass. Pour éviter l'accumulation de blur, empêchez le chevauchement entre cartes, ou donnez à l'une un fond plus opaque (rgba(0,0,0,0.4)) qui masque le blur sous-jacent.