WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animación CSS de texto degradado
903
codex
Abrir en el editor
Publica tu código
Recomendado
22 August 2025
Comentario de marcador de posición de código HTML
25 July 2025
Plataforma de comercio de minería: Comercio de metales y minerales
23 August 2025
Página de inicio de sesión en turco HTML: Formulario de inicio de sesión
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) */