Animação CSS de texto gradiente

1475 codex

Abrir no Editor Publique Seu Código

Recomendado

1 April 2025

Ficha de ficha feita com um índice pastel seguro

16 January 2025

Exemplo de Landing Page de Site de Filme

1 March 2025

Modelo HTML CSS para site de desenvolvedor

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

Recomendado

Ficha de ficha feita com um índice pastel seguro

Exemplo de Landing Page de Site de Filme

Modelo HTML CSS para site de desenvolvedor

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS