Gradient Animation Loop
Dégradé CSS quatre tons en boucle infinie — @keyframes déplace la position d'un fond 400 % surdimensionné pour créer un flux de couleurs fluide, zéro 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
L'effet repose sur deux propriétés CSS combinées. .bg-gradient-loop reçoit un linear-gradient(-45deg, …) à 4 stops de couleur et un background-size: 400% 400% qui rend le fond quatre fois plus large et plus haut que l'élément — les couleurs débordent largement au-delà des bords visibles.
L'animation @keyframes gradientLoop fait osciller background-position entre 0% 50% et 100% 50% (axe horizontal uniquement, hauteur fixée à 50 % pour centrer la coupe). Le cycle dure 15 s avec timing-function: ease — la progression accélère en milieu de cycle et ralentit aux extrêmes, ce qui donne au flux de couleurs une respiration naturelle plutôt qu'un balayage mécanique.
Parce que le fond est 4× plus large que l'élément, passer la position de 0 % à 100 % fait glisser toute la largeur du dégradé sous l'élément. L'angle -45deg ajoute une dimension diagonale : à chaque instant, la coupe visible révèle une diagonale différente du dégradé, créant l'impression d'un mouvement bidirectionnel alors qu'un seul paramètre (background-position-x) est animé.
.bg-label est positionné en absolu au centre du parent grâce à top: 50%; left: 50%; transform: translate(-50%, -50%) — cela suppose position: relative sur le conteneur parent (.demo-preview dans la démo). Dans un projet réel, ce span est remplacé par n'importe quel contenu overlay (titre, carte, CTA).
Accessibilité
- prefers-reduced-motion : ABSENT du code. L'animation tourne sans interruption même si l'OS demande la réduction du mouvement. Pour un usage accessible, ajoutez :
@media (prefers-reduced-motion: reduce) { .bg-gradient-loop { animation: none; } } - Le div
.bg-gradient-loopn'a niroleniaria-label— correct tant que l'effet est un fond purement décoratif. Si l'élément héberge une section sémantique (hero, section tarifaire…), le conteneur parent doit porter les attributs ARIA appropriés (role="region",aria-label). - Le texte
.bg-label(blanc,text-shadow rgba(0,0,0,.5)) reste lisible sur les tons sombres du cycle, mais n'atteint pas WCAG AA sur les phases claires du dégradé (#23d5abvert-teal notamment). Un scrim semi-opaque entre le fond et le texte est nécessaire pour garantir un ratio ≥ 4,5:1. - Aucune interaction clavier, aucun focus, aucun événement utilisateur : l'effet est passif et purement visuel — rien à gérer côté accessibilité interactive.
- Aucun canvas, aucun SVG : le rendu est 100 % CSS. Les lecteurs d'écran ignorent le fond et lisent uniquement le contenu textuel overlay — aucune annotation ARIA supplémentaire requise sur l'effet lui-même.
Compatibilité navigateur
Nécessite linear-gradient, background-size et @keyframes — disponibles dans tous les navigateurs modernes depuis 2015. Zéro dépendance externe.
Sans support <code>background-size</code> (IE 8 et antérieurs), le dégradé s'affiche statique à sa taille naturelle (100 % × 100 %) — aucune erreur JS, la page reste fonctionnelle.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<!-- L'effet : dimensionner via CSS (width, height ou min-height) -->
<div class="bg-gradient-loop">
<!-- Contenu overlay optionnel -->
<!-- (position:relative requis sur le parent pour .bg-label) -->
<span class="bg-label">Votre texte</span>
</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 gradient | #ee7752, #e73c7e, #23a6d5, #23d5ab | Remplacez les 4 valeurs hex dans linear-gradient(-45deg, …) sur .bg-gradient-loop. Ajoutez des stops supplémentaires pour un spectre plus riche. |
| Angle (-45deg) | -45deg | Direction du déplacement apparent. 0deg = flux vertical, 90deg = flux horizontal pur, -45deg = diagonale bas-gauche → haut-droite. |
| background-size (400% 400%) | 400% 400% | Rapport de zoom du fond. Augmentez (ex. 600% 600%) pour des transitions plus douces entre couleurs ; réduisez (ex. 200% 200%) pour des sauts plus marqués. |
| Durée (15s) | 15s | Durée d'un cycle complet. 8s = effet vif et dynamique ; 25s = respiration lente et premium. À adapter selon la taille de la surface. |
| Timing (ease) | ease | Courbe d'accélération de @keyframes gradientLoop. linear pour un flux parfaitement uniforme ; ease-in-out pour des pauses marquées aux extrêmes du cycle. |
FAQ
linear-gradient(-45deg, c1, c2, c3, …). Pour 6 couleurs, montez background-size à 600% 600% afin de conserver des transitions douces — sinon les couleurs extrêmes de la liste restent peu visibles durant le cycle.position: relative sur .bg-gradient-loop, puis placez votre contenu en enfant avec position: relative; z-index: 10. Insérez un scrim entre les deux — <div style="position:absolute;inset:0;background:rgba(0,0,0,.35);"></div> — pour garantir le contraste WCAG AA quelle que soit la phase du cycle.background-position est animée par le compositor CSS du navigateur sans impliquer le thread principal ni déclencher de reflow ni de repaint coûteux. La consommation GPU est négligeable sur les appareils modernes, et les onglets en arrière-plan bénéficient du throttling automatique des animations CSS.
