Conçu pour les équipes modernes
Lancez plus vite,
construisez serein.
La plateforme que vos développeurs attendaient. Puissante, simple, pensée pour croître.
TexteGratuit
Animated Gradient
Un gradient indigo-violet-fuchsia défile en boucle à travers le texte — 100 % CSS, zéro JavaScript, une seule classe à appliquer.
Gradient Flow
Survolez ou cliquez la scène pour interagir
Cet effet est gratuit — la catégorie Texte en contient 56 au total, dont 4 gratuits. Effect.Labs regroupe 811 effets vanilla. Découvrir la catégorie →
Exemples d'usage
Lancez plus vite,
Conçu pour les équipes modernes
Avancez plus vite,
déployez serein.
La plateforme tout-en-un qui transforme vos idées en produits, automatiquement.
Luminary
Votre travail. Réinventé.
Comment ça marche
L'effet repose sur la combinaison de deux propriétés CSS : background-clip: text (déclaré dans le raccourci background via le mot-clé text) et -webkit-text-fill-color: transparent. Ensemble, ils rendent le fond de l'élément visible uniquement à travers les formes des glyphes — le dégradé devient littéralement la couleur du texte.
Le dégradé est dimensionné à 300 % de la largeur de l'élément (background-size: 300% 100%), ce qui laisse hors-champ deux tiers de sa surface. Les couleurs de départ et d'arrivée sont identiques (indigo #6366f1), ce qui rend la boucle visuellement sans couture : aucune coupure n'est perceptible quand l'animation repart au début.
Le mouvement est piloté par un seul @keyframes gradientMove en oscillation : à 0 % et 100 %, la position est 0 % 0 % ; à 50 %, elle passe à 100 % 100 %. Avec le timing linear, le gradient se déplace de gauche à droite puis revient en arrière à vitesse constante, créant un balancement plutôt qu'un défilement unidirectionnel.
Le fichier source contient deux blocs @keyframes gradientMove portant le même nom. En CSS, le second écrase le premier (règle de cascade). Le premier keyframe (défilement unidirectionnel) est donc inactif ; seul le second (oscillation) s'applique. Ce comportement est prévisible et exploitable : remplacer le second bloc par le premier dans votre feuille de styles donne un défilement dans un seul sens.
Accessibilité
- prefers-reduced-motion : ABSENT du code — l'animation tourne en boucle perpétuelle quelle que soit la préférence OS. Pour les projets qui y sont sensibles, ajoutez
@media (prefers-reduced-motion: reduce) { .text-animated-gradient { animation: none; } }. - Le texte reste dans le flux DOM normal — les lecteurs d'écran le lisent sans obstacle, indépendamment de l'effet visuel.
- L'effet est purement décoratif et non-interactif : aucun problème de navigation clavier, aucun focus à gérer.
- Le contraste du gradient (indigo/violet/fuchsia) est suffisant sur fond sombre (
#0a0a0f), mais peut descendre sous le seuil WCAG AA sur fond clair — à vérifier selon votre palette et votre fond. - Aucun attribut ARIA n'est requis pour un élément texte inline décoratif ; si l'élément porte un sens sémantique fort, il reste accessible via le texte brut.
Compatibilité navigateur
Nécessite background-clip: text et -webkit-text-fill-color — couverts dans tous les navigateurs modernes depuis 2021.
Chrome 85+✓ Complet
Firefox 86+✓ Complet
Safari 14+✓ Complet
Edge 85+✓ Complet
Mobile iOS✓ Complet
Android Chrome✓ Complet
Si <code>background-clip: text</code> n'est pas supporté, le texte s'affiche avec sa couleur héritée (généralement blanc ou noir) — lisible, sans erreur.
Le code
Copiez les trois blocs dans votre page. Aucune dépendance.
HTML
<span class="demo-text text-animated-gradient">Gradient Flow</span>
CSS
.demo-text {
font-size: 2.5rem;
font-weight: 800;
letter-spacing: -0.02em;
}
.text-animated-gradient {
background: linear-gradient(90deg, rgb(99, 102, 241), rgb(139, 92, 246), rgb(217, 70, 239), rgb(99, 102, 241)) 0% 0% / 300% 100% text;
-webkit-text-fill-color: transparent;
animation: 4s linear 0s infinite normal none running gradientMove;
}
@keyframes gradientMove {
0% {
background-position: 0% 50%;
}
100% {
background-position: 300% 50%;
}
}
@keyframes gradientMove {
0%, 100% {
background-position: 0% 0%, 100% 100%;
}
50% {
background-position: 100% 100%, 0% 0%;
}
}
JavaScript (fx-0629)
// Effet CSS pur — pas de JavaScript nécessairePersonnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| Couleurs du gradient | indigo → violet → fuchsia → indigo | Modifiez les 4 stops de linear-gradient(90deg, …) dans .text-animated-gradient. La 1ʳᵉ et la 4ᵉ couleur doivent être identiques pour une boucle sans couture. |
| background-size: 300% 100% | 300% | Augmentez à 400–500 % pour des transitions plus progressives ; réduisez à 200 % pour un contraste plus fort entre les extrêmes. |
| animation: 4s linear … | 4s | Changez la durée : 2 s = badge dynamique, 6–8 s = titre contemplatif. La fonction linear assure un mouvement constant ; remplacez par ease-in-out pour un ralenti aux extrêmes. |
| font-size: 2.5rem | 2.5rem | Taille dans .demo-text — l'effet est visible dès 1 rem mais spectaculaire à 3 rem et plus. |
| font-weight: 800 | 800 | Graisse du texte — une graisse ≥ 700 rend le gradient plus lisible car les glyphes couvrent plus de surface. |
| letter-spacing: -0.02em | -0.02em | Resserrement du texte — utilisez une valeur positive (0.06–0.12em) sur les badges en majuscules pour l'aération. |
| @keyframes gradientMove (1ᵉʳ bloc) | inactif | Le premier bloc (défilement unidirectionnel de 0 % à 300 %) est écrasé par le second. Supprimez le second bloc pour activer le défilement dans un seul sens. |
FAQ
L'effet nécessite-t-il du JavaScript ?
Non — Animated Gradient est 100 % CSS. Aucun script n'est requis : ajoutez la classe .text-animated-gradient sur n'importe quel <span>, <h1> ou élément inline, collez le bloc CSS, et l'animation démarre. Compatible avec tous les frameworks (React, Vue, Svelte, Angular) sans adaptateur.
Pourquoi y a-t-il deux <code>@keyframes gradientMove</code> dans le code source ?
En CSS, quand deux @keyframes portent le même nom dans la même feuille de styles, le dernier déclaré écrase le premier. Le second keyframe (oscillation) remplace donc le premier (défilement unidirectionnel). Si vous préférez un défilement dans un seul sens, supprimez le second bloc @keyframes gradientMove dans votre copie locale.
Comment adapter les couleurs à ma charte graphique ?
Remplacez les 4 valeurs de couleur dans linear-gradient(90deg, C1, C2, C3, C1) de la propriété background. La règle clé : la 1ʳᵉ et la 4ᵉ couleur doivent être identiques pour que la boucle soit imperceptible. Exemple bleu brand : linear-gradient(90deg, #0ea5e9, #6366f1, #8b5cf6, #0ea5e9).
