Gradient Text CSS Animation

Open In Editor Publish Your Code

Gradient Text CSS Animation

Recommended

31 August 2024

CSS Filter cards

21 July 2025

CSS Radio Button Navigation Menu

15 September 2025

CSS Grid Animation Example

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