Animated Mesh Gradient
Cinq dégradés radiaux animés en couches forment un fond mesh fluide — les blobs de couleur permutent d'un coin à l'autre en CSS pur, sans JavaScript.
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
La classe .bg-mesh-animated empile cinq radial-gradient sur un fond solide #0a0a0f, chacun ancré à un coin ou à un bord via la syntaxe at X% Y%. Chaque blob passe de sa couleur saturée à transparent à 50 % de rayon — la composition CSS par défaut (alpha blending) suffit à mélanger les cinq teintes là où elles se chevauchent, sans mix-blend-mode.
L'animation @keyframes meshMoveAnimated repositionne simultanément les cinq background-position : à 0 %/100 % les blobs occupent leurs coins d'origine (0 0, 100% 0, 0 100%, 100% 100%, 0 100%) ; à 50 % ils migrent vers les coins opposés (100% 100%, 0 100%, 100% 0, 0 0, 100% 0). Ce mouvement de permutation croisée crée des zones de mélange changeantes sans interpolation de couleur — seule la position des blobs varie.
La durée de 20 s et le timing ease ralentissent le début et la fin de chaque cycle, masquant la discrétion des keyframes et donnant l'impression d'un glissement organique continu. La propriété background-position est animée sur le compositing thread du navigateur — aucun layout ni paint déclenché, performances stables même sur mobile.
La structure est réduite à un seul <div class="bg-mesh-animated">. Tout contenu overlay (titre, CTA) est positionné en absolute par-dessus. Largeur et hauteur sont entièrement pilotées par le conteneur parent — remplacez min-height: 300px par height: 100% ou min-height: 100vh selon le contexte.
Accessibilité
- prefers-reduced-motion absent : le code ne contient aucun
@media (prefers-reduced-motion). Si un utilisateur a activé la réduction du mouvement dans son OS, l'animation continue. À corriger en production :@media (prefers-reduced-motion: reduce) { .bg-mesh-animated { animation: none; } }. - Le
<div class="bg-mesh-animated">ne porte niaria-hidden, nirole, niaria-label. Étant purement décoratif, il devrait recevoiraria-hidden="true"pour être ignoré par les lecteurs d'écran. - Le
.bg-labelintégré à la démo (texte « Mesh+ ») s'affiche en blanc sur fond sombre — le contraste est suffisant (> 4,5:1). En production, tout texte positionné sur le mesh doit être vérifié manuellement : les blobs colorés modifient la luminance locale en continu. - L'effet n'expose aucune zone interactive : pas de bouton, pas de focus, pas de piège clavier. La navigation clavier de la page n'est pas affectée.
- CSS pur, zéro JavaScript — l'effet fonctionne même quand JS est désactivé, sans erreur.
Compatibilité navigateur
Requiert les multi-backgrounds CSS et la syntaxe radial-gradient(at …) — disponibles dans tous les navigateurs modernes depuis 2013.
Sans support des gradients CSS, le <code><div></code> affiche son fond de base <code>#0a0a0f</code> — aucune erreur JS, la page reste utilisable.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="bg-mesh-animated" style="width:100%;min-height:300px;" aria-hidden="true">
<!-- Facultatif : contenu superposé en position:absolute -->
<span class="bg-label">Votre texte</span>
</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 des blobs (5 hex dans background) |
#6366f1, #d946ef, #06b6d4, #f43f5e, #10b981 | Remplacez la valeur hex dans chaque ligne radial-gradient(at … , #HEX 0, transparent 50%) — un blob par ligne, dans l'ordre d'apparition. |
Durée de l'animation (20s) |
20s | Augmentez (ex. 40 s) pour un mouvement imperceptible et apaisant, réduisez (ex. 8 s) pour un effet plus dynamique. |
Étendue des blobs (transparent 50%) |
50% | Augmentez jusqu'à 70–80 % pour des blobs qui se chevauchent davantage ; réduisez à 30–35 % pour des taches plus concentrées avec des zones sombres visibles entre elles. |
Fond de base (#0a0a0f) |
#0a0a0f | Dernière valeur du raccourci background. Remplacez par #fff pour un mesh sur fond blanc, ou par n'importe quelle couleur brand. |
Nombre de blobs (5 lignes radial-gradient) |
5 | Supprimez une ou deux lignes pour un mesh minimaliste (3 blobs) ; ajoutez-en jusqu'à 7 avant que la charge GPU n'augmente sensiblement sur mobile. |
Positions de départ (at X% Y%) |
40% 20%, 80% 0, 0 50%, 80% 100%, 0 100% | Modifiez les pourcentages pour changer le point d'origine de chaque blob — jouez sur l'asymétrie pour un rendu moins symétrique. |
Timing de l'animation (ease) |
ease | Passez à linear pour un mouvement constant, ou ease-in-out pour des pauses encore plus marquées aux extrêmes du cycle. |
FAQ
.bg-mesh-animated et le @keyframes meshMoveAnimated dans votre feuille de styles globale ou un module CSS, puis appliquez la classe à n'importe quel <div>. Aucune bibliothèque, aucun hook, aucun cycle de vie requis.radial-gradient(at … , #HEX 0, transparent 50%) dans la propriété background. Remplacez les cinq valeurs hex par vos couleurs brand. Pour un mesh bichrome, répétez la même couleur sur plusieurs lignes en variant les positions — le mélange restera subtil.background-position est animée par le compositing thread sans déclencher de layout ni de paint sur les navigateurs modernes (Chrome 88+, Firefox 87+, Safari 15+). Sur des appareils très bas de gamme, augmentez la durée à 30–40 s pour réduire la sollicitation GPU.
