Gradient Wave
Un dégradé diagonal de 4 teintes se déplace en boucle sur une surface 4× plus large que le conteneur — pur CSS, zéro dépendance.
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 principe repose sur une seule propriété animée : background-position. Le dégradé est déclaré en linear-gradient(-45deg, …) — direction diagonale bas-gauche → haut-droit — avec quatre arrêts de couleur (indigo #6366f1, violet #8b5cf6, fuchsia #d946ef, cyan #06b6d4). Un background-size: 400% 400% étend la surface peinte à 4× la largeur et 4× la hauteur de l'élément : le navigateur dispose d'une large palette à faire défiler.
Le @keyframes gradientWave déplace cette surface de 0 50% à 100% 50% puis revient à 0 50% en 15 secondes. L'axe Y reste fixe à 50 % : seul l'axe X oscille, ce qui maintient la diagonale centrée verticalement et évite toute dérive perceptible. La fonction ease donne une accélération naturelle à chaque extrémité du balancement.
Parce que le dégradé est diagonal (−45°) et que la surface défilée couvre ¾ de la largeur totale (de 0 % à 100 % d'un fond 4× plus large), chaque teinte traverse l'écran en diagonale à tour de rôle, donnant l'impression d'une vague colorée continue. Modifier l'angle (135deg inverse la direction), le nombre d'arrêts ou le background-size change radicalement l'amplitude et la cadence de la vague.
L'animation est entièrement gérée par le thread compositeur du navigateur : aucun JavaScript n'est requis, aucun reflow n'est déclenché. L'élément .bg-wave accepte du contenu overlay — il suffit d'ajouter position: relative via votre CSS pour positionner les enfants en absolu par-dessus le fond animé.
Accessibilité
- prefers-reduced-motion absent : aucune règle
@media (prefers-reduced-motion: reduce)n'est présente dans le CSS fourni — l'animation tourne sur tous les systèmes, y compris ceux qui demandent moins de mouvement. À ajouter soi-même :@media (prefers-reduced-motion: reduce) { .bg-wave { animation: none; } }. - L'élément
.bg-waveest purement décoratif dans la plupart des usages : ajoutezaria-hidden="true"si aucun de ses enfants n'est destiné aux lecteurs d'écran. - Texte superposé et contraste : les tons indigo/violet (
#6366f1,#8b5cf6) sur fond animé donnent un contraste texte blanc ≈ 4,6:1 en phase froide — mais le cyan clair (#06b6d4, luminosité ≈ 52 %) descend sous 3:1. Un scrim semi-transparent derrière le texte garantit WCAG AA quelle que soit la phase de l'animation. - Pas d'interactivité native : aucun élément focusable dans l'effet, aucune gestion clavier requise pour le fond seul.
- Si
.bg-wavecouvre la zone principale de la page (hero), envisagezrole="region"et unaria-labeldescriptif pour les lecteurs d'écran.
Compatibilité navigateur
CSS linear-gradient, background-size et @keyframes sont supportés dans tous les navigateurs modernes depuis 2013. Aucun préfixe vendeur requis.
Si les animations CSS sont désactivées ou non supportées, <code>.bg-wave</code> affiche le dégradé statique en position <code>0 50%</code> (dominante indigo/violet). Aucune erreur JS, aucune ressource réseau requise.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="bg-wave">
<!-- Contenu overlay optionnel -->
<!-- Ajouter position:relative au sélecteur .bg-wave dans votre CSS -->
<!-- pour positionner les enfants par-dessus le fond animé. -->
<span class="bg-label">Votre texte centré</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 |
|---|---|---|
| animation-duration sur .bg-wave | 15s | Vitesse du cycle complet. 8 s = dynamique, 25 s = calme et quasi-statique à la lecture. |
| Angle dans linear-gradient | -45deg | Direction de la diagonale. 135deg inverse le sens du défilement ; 90deg donne une vague horizontale pure. |
| Arrêts de couleur dans linear-gradient | #6366f1, #8b5cf6, #d946ef, #06b6d4 | Palette de la vague. 3 couleurs = transitions plus douces, 5+ = kaléidoscope. Collez votre palette brand. |
| background-size sur .bg-wave | 400% 400% | Amplitude du panoramique. 200% = vague courte et marquée, 600% = glissement très progressif. |
| animation-timing-function sur .bg-wave | ease | linear supprime l'accélération pour un défilement régulier ; ease-in-out accentue les pauses aux extrémités. |
| background-position Y dans les keyframes | 50% | Décalage vertical de la vague. 0% ou 100% révèle les bords haut/bas du dégradé étendu — crée un léger mouvement vertical complémentaire. |
FAQ
@keyframes gradientWave et la règle .bg-wave dans votre feuille de style, ajoutez la classe à votre div, et c'est prêt. Compatible avec tous les frameworks (React, Vue, Svelte, Angular) et les générateurs de sites statiques.position: relative à .bg-wave, puis insérez vos enfants en position: absolute ou dans un flux normal. Pour garantir le contraste à toutes les phases de l'animation, ajoutez un scrim (ex. background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.20)) en position: absolute; inset: 0 avec z-index: 1) et placez le texte en z-index: 2.background-position sur un dégradé CSS déclenche uniquement l'étape de composite du navigateur — aucun reflow, aucun repaint du DOM. La charge GPU est négligeable même sur mobile. Pour les utilisateurs ayant activé Réduire le mouvement, ajoutez @media (prefers-reduced-motion: reduce) { .bg-wave { animation: none; } } : le dégradé reste visible, statique.
