Aller au contenu

Texte en dégradé animé

Un titre dont une partie est remplie d’un dégradé de couleurs qui glisse en continu.

  • Tailwind
  • React
  • CSS
  • WordPress
Ouvrir dans un nouvel onglet

Description

Les mots mis en avant sont remplis d’un dégradé violet, framboise et bleu qui défile lentement à travers les lettres, sans que le texte bouge. Le titre reste un vrai texte, sélectionnable et lu normalement par les lecteurs d’écran. Les teintes sont choisies pour garder un contraste AA en clair comme en sombre, et une couleur pleine prend le relais dans les navigateurs sans background-clip: text. Avec prefers-reduced-motion, le dégradé reste fixe.

Code

Chargement du code…

Contenu de l'archive

effet-texte-degrade-anime-html-tailwind.zip3 fichiers · 3 Ko

  • index.html2 Ko
  • README.md3 Ko
  • LICENSE.md1 Ko

Mots-clés

Mis à jour le 18 octobre 2026.

Dans le même esprit

  • Une carte translucide et floutée posée sur des formes colorées qui flottent lentement derrière elle.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Le bas d’une section colorée découpé par trois vagues transparentes qui ondulent à des vitesses différentes.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Un titre qui s’écrit lettre par lettre derrière un curseur clignotant, en CSS seul.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Des étapes qui apparaissent en fondu et en glissant à mesure qu’on fait défiler la page, sans script.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant