WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animation CSS de texte dégradé
1476
codex
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
9 December 2025
Route de Crossy
24 May 2025
Redémarrage de Windows
4 December 2025
Effet verre HTML, animation CSS
HTML
Copy
Animated Gradient Text
CSS
Copy
body { background: hsl(204 100% 5%); min-block-size: 100%; box-sizing: border-box; display: grid; place-content: center; font-family: system-ui; font-size: min(200%, 4vmin); padding: 5vmin; } @property --color-1 { syntax: "<color>"; inherits: false; initial-value: hsl(98 100% 62%); } @property --color-2 { syntax: "<color>"; inherits: false; initial-value: hsl(204 100% 59%); } /* keyframes that change the color variable */ @keyframes gradient-change { to { --color-1: hsl(210 100% 59%); --color-2: hsl(310 100% 59%); } } article { animation: gradient-change 2s linear infinite alternate; background: linear-gradient( to right in oklch, var(--color-1), var(--color-2) ); background-clip: text; color: transparent; } h1, p, body { margin: 0; text-wrap: balance; } h1 { line-height: 1.25cap; } html { block-size: 100%; } article { display: grid; gap: 1lh; text-align: center; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */