WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animation CSS de texte dégradé
1477
codex
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
1 March 2025
Modèle HTML CSS pour site Web de développeur
11 September 2025
Jeu de tir HTML5 Canvas avec classement
10 August 2025
Structure d'animation de bloc 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) */