Six gradients radiaux en CSS pur qui dérivent lentement sur un fond sombre et se fondent en une nappe de couleur organique — aucun JavaScript requis.
Cet effet est gratuit — la catégorie Backgrounds en contient 50 au total, dont 6 gratuits. Effect.Labs regroupe 811 effets vanilla. Découvrir la catégorie →
Une plateforme ouverte combinant IA, automatisation et analytics temps réel — sans dépendance.
Studio créatif à la croisée du design et de la technologie, basé à Paris depuis 2017.
Connectez-vous pour continuer
Mot de passe oublié ?
Le fond est construit avec une seule propriété background empilant six radial-gradient() définis chacun par une position absolue (at x% y%) : chaque halo part d'une couleur saturée au centre et s'estompe vers le transparent sur 50 % du conteneur. La couleur de base rgb(10, 10, 15), placée en dernier dans le raccourci, joue le rôle de fond de scène — elle est visible aux intersections où tous les gradients sont transparents.
L'animation repose sur @keyframes meshMove, qui anime la propriété background-position des six couches indépendamment. À 0 % et 100 %, les halos occupent leurs positions de départ (0% 0%, 100% 0%…) ; à 50 %, ils basculent vers les positions opposées (100% 100%, 0% 100%…). Ce croisement fait voyager chaque centre de couleur vers le coin opposé, créant un effet de respiration sur un cycle de 20 secondes avec une accélération douce (ease).
Le mélange visuel est entièrement géré par la composition CSS native : les couches de gradients se superposent, les zones transparentes laissent apparaître les couches inférieures et la couleur de base. Aucun canvas, aucun calcul JS — le navigateur gère l'interpolation GPU des positions, ce qui maintient l'animation légère même sur de grandes surfaces.
@media (prefers-reduced-motion: reduce) { .demo-preview.bg-mesh { animation: none; } } avant tout déploiement..bg-mesh n'a pas de role ni d'aria-label — il est purement décoratif. Le contenu textuel à superposer doit être dans un élément frère ou enfant pour rester lisible par les lecteurs d'écran..bg-label (texte « Mesh » centré) est positionné en absolu avec un text-shadow semi-transparent. Aucun ratio de contraste WCAG n'est garanti : le fond est dynamique. À remplacer ou masquer en production.Nécessite les animations CSS (@keyframes) et la syntaxe background multi-couches avec position — supportés dans tous les navigateurs modernes depuis 2013.
Sans support des <code>@keyframes</code> (IE 9 et antérieurs) : les six gradients s'affichent statiquement sur la couleur de fond — rendu cohérent, pas d'animation. Sur IE 8, la propriété <code>background</code> multi-couches est ignorée et seule la couleur de base <code>rgb(10, 10, 15)</code> s'affiche.
Copiez les trois blocs dans votre page. Aucune dépendance.
<div class="bg-mesh" style="width:100%;min-height:300px;">
<span class="bg-label">Mesh</span>
</div>@keyframes meshMove {
0%, 100% {
background-position: 0% 0%, 100% 0%, 0% 100%, 100% 50%, 0% 100%, 100% 100%;
}
50% {
background-position: 100% 100%, 0% 100%, 100% 0%, 0% 50%, 100% 0%, 0% 0%;
}
}
.bg-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: 700;
font-size: 1.5rem;
color: white;
text-shadow: rgba(0, 0, 0, 0.5) 0px 2px 10px;
z-index: 10;
}// Effet CSS pur — pas de JavaScript nécessaireOptions passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| Couleurs des radial-gradient() (dans le CSS) | indigo · fuchsia · cyan · violet · indigo · rose | Remplacez les 6 valeurs rgb() dans les radial-gradient(). Chaque gradient correspond à une zone du fond — modifiez-les indépendamment pour coller à votre palette brand. |
| animation-duration (20s) | 20s | Durée d'un cycle complet dans la propriété animation. 10 s = mouvement perceptible ; 40 s = dérive très lente, quasi imperceptible. Changez uniquement cette valeur dans le raccourci animation. |
| animation-timing-function (ease) | ease | Remplacez ease par linear pour un mouvement constant ou cubic-bezier(0.45,0,0.55,1) pour un effet de respiration plus marqué aux extrémités. |
| Couleur de base (rgb(10, 10, 15)) | rgb(10, 10, 15) | Dernière valeur du raccourci background : teinte visible aux intersections transparentes. Passez à #fff pour un thème clair — les gradients se comportent différemment sur fond blanc (tons pastel recommandés). |
| Rayon de chaque gradient (transparent 50%) | 50% | La valeur 50% dans chaque radial-gradient(…, transparent 50%) contrôle la taille du halo. 30 % = halos distincts et contrastés ; 70 % = nappes larges qui se fondent presque complètement. |
| animation-play-state | running | Passez à paused via JS (el.style.animationPlayState = 'paused') pour stopper proprement l'animation — utile pour un bouton Pause ou pour respecter prefers-reduced-motion côté JavaScript. |
Non — c'est du CSS pur. Copiez le bloc HTML et le CSS, c'est prêt. Aucune dépendance, aucun bundle. Compatible avec tous les frameworks (React, Vue, Svelte, Angular) : enveloppez le <div class="bg-mesh"> dans un composant, les styles s'appliquent immédiatement sans configuration.
Remplacez la couleur de base rgb(10, 10, 15) par #ffffff (ou une teinte claire) en fin du raccourci background, puis utilisez des couleurs pastel pour les gradients (rgba() avec haute transparence ou HSL à faible saturation). Sur fond blanc, les gradients transparents se fondent doucement — le rendu change radicalement par rapport au mode sombre.
Oui, à condition d'ajouter un scrim entre le fond et le texte : un <div> en position absolue (inset: 0) avec background: linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0.25)) suffit. Le texte blanc gagne alors un ratio de contraste WCAG AA fiable, même quand les gradients traversent des zones claires.
