Gradient Flow
Fait défiler en continu un dégradé multicolore sur n'importe quel texte — pur CSS, aucun JS, boucle sans saut grâce à l'arrêt de couleur répété.
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. Texte comprend 56 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet repose sur background-clip: text (et -webkit-text-fill-color: transparent) : le dégradé est positionné sur le fond de l'élément puis découpé à la forme exacte des glyphes, sans masque SVG ni pixel de canvas. L'arrière-plan de la page transparaît entre les caractères.
Le dégradé est déclaré 3× plus large que l'élément (background-size: 300% 100%). La @keyframes gradientFlowAnim fait glisser background-position de 0% 50% à 300% 50% en 3 s en mode linear, infinite : on parcourt exactement un cycle complet du dégradé à chaque itération, sans saut.
Pour un raccord invisible au bouclage, la première couleur (#ff0080) est répétée en dernier arrêt du linear-gradient. Quand la position revient à 0%, la teinte affichée est identique à celle du dernier pixel de l'itération précédente. Sans cette répétition, un flash de contraste brutal trahit la boucle.
L'effet est 100 % CSS, sans JS ni dépendance. Il s'applique à tout élément texte (<h1>, <span>, <a>, <button>) en ajoutant les deux classes ou en copiant directement les propriétés. Plusieurs instances sur la même page tournent indépendamment via la même @keyframes, sans conflit.
Accessibilité
- prefers-reduced-motion absent : aucune media query n'interrompt l'animation quand l'OS signale une préférence réduite. Pour corriger, enveloppez la règle d'animation dans
@media (prefers-reduced-motion: no-preference) { .text-gradient-flow { animation: … } }. - Contraste non garanti hors fond sombre : les couleurs par défaut (rose
#ff0080, orange#ff8c00, turquoise#40e0d0) passent WCAG AA sur fond#0a0a0f, mais le ratio varie avec chaque arrêt — testez votre palette avec un outil de contraste avant de déployer sur fond clair ou saturé. - Pas d'attribut ARIA dans la structure minimale : l'élément texte reste dans le flux normal et est lu tel quel par les lecteurs d'écran. S'il est purement décoratif, ajoutez
aria-hidden="true". - Aucune interaction clavier ni gestion de focus par l'effet : si le texte est un lien ou un bouton, définissez
:focus-visibleindépendamment. - L'animation ne produit ni clignotement ni flash (translation de fond continue, < 3 Hz) — elle respecte WCAG 2.3.1.
Compatibilité navigateur
Nécessite background-clip: text (CSS4) et -webkit-text-fill-color. La syntaxe shorthand background: … / 300% 100% text (clip en fin de valeur) requiert Chrome 116+ / Edge 116+ / Safari 16.4+ / Firefox 122+.
Sur les navigateurs plus anciens, <code>background-clip: text</code> est ignoré : le texte s'affiche avec sa couleur CSS héritée (blanc par défaut sur fond sombre). Aucun crash JS, la page reste lisible. Pour une compatibilité élargie, utilisez les propriétés longhand avec <code>-webkit-background-clip: text</code> et <code>-webkit-text-fill-color: transparent</code>.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<!-- Texte avec dégradé animé -->
<span class="demo-text text-gradient-flow">
Votre texte ici
</span>
</div>
<!-- Sans wrapper : directement sur n'importe quel élément -->
<h1 class="demo-text text-gradient-flow">Titre animé</h1>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 dégradé | #ff0080, #ff8c00, #40e0d0, #ff0080 | Modifiez les arrêts dans linear-gradient(90deg, …). Le 1er et le dernier arrêt doivent être identiques pour une boucle sans saut visible. |
| background-size: 300% | 300% | Largeur du dégradé par rapport à l'élément. Augmentez à 400–600% pour un cycle plus long avec plus de couleurs intermédiaires et des transitions plus douces. |
| animation-duration (3s) | 3s | Durée d'un cycle complet. 2s = rapide et énergique ; 6s = lent et élégant. Adaptez à l'ambiance visuelle de la page. |
| animation-timing-function (linear) | linear | linear pour un défilement régulier (recommandé en boucle infinie). ease-in-out crée un léger effet de pulsé — plus visible mais non linéaire au bouclage. |
| animation-direction (normal) | normal | Passez à reverse pour inverser le sens du défilement (droite → gauche). Utile pour créer un effet miroir entre deux éléments voisins. |
| font-size: 2.5rem | 2.5rem | Taille du texte sur .demo-text. L'effet est plus spectaculaire à grande taille (≥ 2rem) ; sur des textes petits ou fins, les couleurs du dégradé pâlissent visuellement. |
| font-weight: 800 | 800 | Graisse sur .demo-text. Les graisses élevées (700–900) maximisent la surface de remplissage et rendent les couleurs plus intenses sur des fontes larges. |
FAQ
demo-text text-gradient-flow à chaque élément. Étant 100 % CSS, chaque instance tourne indépendamment via la même @keyframes gradientFlowAnim ; aucun JS à initialiser, aucun conflit entre instances.background-position revient à 0%, la teinte affichée est identique à celle du dernier pixel de l'itération précédente. Sans cette répétition, un flash de contraste brutal trahit le bouclage — visible surtout à vitesse rapide.background-clip: text laisse le fond de la page transparaître à travers les glyphes — il n'y a pas de fond de remplissage, seulement les couleurs du dégradé sur les caractères. Sur fond blanc, les couleurs par défaut (rose, orange, turquoise) restent visibles mais le contraste WCAG AA n'est pas garanti — testez votre palette avec un outil de contraste avant de déployer.
