Gradient Text CSS Animation

1,958 codex

Open In Editor Publish Your Code

Gradient Text CSS Animation

Recommended

21 August 2025

CSS Ghost Animation

17 April 2026

CSS Heart Animation HTML Code

7 November 2024

HTML

CSS

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