Glass Mesh Card
Fond maillé animé par cinq dégradés radiaux flous, surmonté d'une carte glassmorphique — backdrop-filter, fond semi-transparent et bordure nacrée.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Backgrounds comprend 50 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le fond maillé est formé de cinq radial-gradient empilés dans un seul élément .glass-mesh-bg. Chaque dégradé ancre une couleur vive à une position précise (20 % 30 %, 80 % 25 %, 50 % 80 %…) et s'estompe en transparent sur 45 à 50 % de son rayon. La superposition des cinq semi-transparences génère une tache de couleur organique, sans tracé ni contour net.
Un filter: blur(25px) fond l'ensemble en une nappe colorée douce. L'élément déborde de son parent grâce à inset: -30% afin que le flou n'expose aucun bord blanc aux coins — le overflow: hidden du .glass-mesh-wrapper coupe l'excédent proprement.
L'animation CSS glassMeshAnim (10 s, ease-in-out, alternate infinite) translate, fait pivoter et met légèrement à l'échelle le fond sous la carte. Le sens alternate inverse le mouvement en fin de cycle : aucun saut visible, aucune répétition brusque.
La carte .glass-mesh-card exploite backdrop-filter: blur(20px) pour flouter la nappe colorée qui transparaît derrière elle. Son fond rgba(255, 255, 255, .08) et sa bordure rgba(255, 255, 255, .15) créent l'effet verre dépoli du glassmorphisme, renforcé par un box-shadow qui amplifie la profondeur perçue.
Accessibilité
- prefers-reduced-motion : absent du code source — l'animation CSS tourne même si la préférence système est activée. Ajoutez
@media (prefers-reduced-motion: reduce) { .glass-mesh-bg { animation: none; } }lors de l'intégration. - Le texte dans
.glass-mesh-card(<h3>et<p>) est du HTML sémantique standard, intégralement lisible par les lecteurs d'écran sans couche supplémentaire. - Contraste du texte blanc sur fond glassmorphique : ratio ≥ 7:1 sur fond sombre (
#0a0a0f, WCAG AAA). Sur fond clair, vérifiez le contraste effectif après application du glassmorphisme selon le contexte d'intégration. - La structure utilise un
<h3>: adaptez le niveau de titre (<h2>,<h4>…) à la hiérarchie de la page cible. - Pas d'interaction clavier dans le code de base — l'effet est purement décoratif. Les éléments interactifs ajoutés dans
.glass-mesh-card(boutons, liens) doivent gérer leur propre:focus-visible.
Compatibilité navigateur
Nécessite backdrop-filter et les animations CSS — supportés dans tous les navigateurs modernes. Aucune dépendance externe, zéro JavaScript.
Sans <code>backdrop-filter</code> (Firefox < 103 sans flag), la carte conserve son fond semi-transparent mais sans flou — le texte reste lisible et la nappe colorée animée n'est pas affectée.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="glass-mesh-wrapper">
<div class="glass-mesh-bg"></div>
<div class="glass-mesh-card">
<div class="glass-dots">
<div class="glass-dot"></div>
<div class="glass-dot"></div>
<div class="glass-dot"></div>
</div>
<h3>Titre de la carte</h3>
<p>Description ou contenu</p>
</div>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| couleurs du maillage | Rose, cyan, orange, vert, violet | Remplacez les cinq valeurs rgba(…) dans le background de .glass-mesh-bg — chaque couleur ancre un pôle de la nappe animée. |
| filter: blur() sur .glass-mesh-bg | 25px | Augmentez (≥ 35 px) pour fondre davantage les couleurs, réduisez (≤ 12 px) pour des zones plus tranchées et saturées. |
| animation-duration sur .glass-mesh-bg | 10s | Durée d'un demi-cycle. 6–8 s = ambiance dynamique, 14–20 s = dérive quasi imperceptible. |
| inset sur .glass-mesh-bg | -30% | Débordement hors du conteneur. Augmentez si le flou laisse apparaître un bord blanc aux coins. |
| backdrop-filter sur .glass-mesh-card | blur(20px) | Flou du verre dépoli. blur(10px) = verre translucide, blur(32px) = verre givré quasi opaque. |
| background sur .glass-mesh-card | rgba(255,255,255,.08) | Opacité du fond blanc. 0 = transparent pur, 0,18–0,25 = verre plus mat, lisible sur fond très coloré. |
| border sur .glass-mesh-card | 1px solid rgba(255,255,255,.15) | Couleur et opacité du liseret nacré. Montez l'alpha (0,3–0,5) pour un contour visible, ou teintez la couleur pour un verre coloré. |
FAQ
.glass-mesh-wrapper est autonome. Copiez le bloc HTML autant de fois que nécessaire. Le keyframe glassMeshAnim est défini une seule fois en CSS et partagé par toutes les instances sans conflit. Différenciez les cartes en surchargeant le background de chaque .glass-mesh-bg via un attribut style ou une classe utilitaire.backdrop-filter: blur() est accéléré GPU sur Chrome, Edge et Safari modernes — l'impact est négligeable sur un seul élément. Évitez de superposer trois niveaux de backdrop-filter ou de l'appliquer sur un élément qui couvre plus de 50 % de l'écran. Sur Firefox < 103, il est silencieusement ignoré (repli sans flou, texte toujours lisible).@media (prefers-reduced-motion: reduce) { .glass-mesh-bg { animation: none; } } — l'effet ne le fait pas nativement. Pour un contrôle programmatique : document.querySelector('.glass-mesh-bg').style.animationPlayState = 'paused'.
