WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Gradient Text CSS Animation
1429
codex
Open In Editor
Publish Your Code
Recommended
19 September 2025
CSS Animation: Bureaucracy Figure Movement
19 November 2025
CSS Animated Loading Screen with Dots
27 September 2025
CSS Loading Animation: Memory Flow & Reflection
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) */