Animação CSS de texto gradiente

1011 codex

Abrir no Editor Publique Seu Código

Recomendado

19 May 2025

Animação Star Trails

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;
  }
}

Animação CSS de texto gradiente

Recomendado

animação de caixa de mosca 3D

máquina de garra

Animação Star Trails

HTML

CSS

JS

Recomendado

animação de caixa de mosca 3D

máquina de garra

Animação Star Trails

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS