ToolnozaComprendre le mouvement
Le dégradé est une image de fond CSS agrandie à 300 %. Les keyframes déplacent background-position d’un côté à l’autre puis reviennent, donnant une impression de circulation des couleurs.
L’angle définit l’orientation du dégradé. La durée correspond à l’aller-retour complet. Commencez par 10 secondes ; des couleurs proches donnent généralement un effet plus discret.
Appliquer le CSS
Copiez le style et ajoutez class="animated-gradient" à l’élément. Cette classe crée le fond, pas le contenu, la hauteur ou la couleur du texte. Un élément vide sans hauteur peut rester invisible.
La pause ne concerne que l’aperçu. Pour supprimer l’animation exportée, retirez sa déclaration ou définissez animation: none. Renommez la classe et les keyframes en cas de conflit dans votre site.
Vérifier lisibilité et mouvement
Le CSS exporté inclut prefers-reduced-motion afin d’afficher un fond statique aux personnes qui réduisent les animations. Conservez cette règle et vérifiez qu’un autre style ne la remplace pas.
Contrôlez le texte sur toutes les couleurs traversées. Un vérificateur de contraste teste des paires de couleurs, pas l’animation entière. Un panneau de texte uni reste plus prévisible. Testez aussi la fluidité sur mobile.
Utiliser l’outil
Choisissez trois couleurs, un angle et une durée, puis copiez le CSS. Appliquez la classe animated-gradient à votre élément.
Exemple expliqué
Un dégradé bleu, violet et cyan à 135° avec un cycle de 10 secondes crée un fond animé fluide.
Le dégradé nécessite-t-il JavaScript ?
Non : le code utilise des keyframes CSS et une requête média. L’élément doit avoir des dimensions ou du contenu pour afficher son fond.