Dica rápida de CSS! Texto em gradiente animado

Vamos criar esse efeito de texto com gradiente animado usando propriedades personalizadas com escopo e background-clip.

Jhey Tompkins

Acesse o CodePen e crie uma nova caneta.

Crie a marcação do texto. Vamos usar um cabeçalho com a palavra "Speedy":

<h1 class="boujee-text">Hello!</h1>

Em seguida, vamos dar um background-color mais escuro ao body:

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: hsl(0 0% 20%);
}

Aumente o valor de font-size no texto. Use clamp para torná-lo responsivo:

.boujee-text {
  font-size: clamp(3rem, 25vmin, 8rem);
}

Crie duas propriedades personalizadas para as cores que vamos usar. Aplique uma linear-gradient à background usando essas cores e gire-a em 90 graus:

.boujee-text {
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / 100% 100%;
}

Crie uma propriedade personalizada que possa ser usada para o tamanho de plano de fundo horizontal. Use-o para background-size-x:

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
}

Para recortar o plano de fundo ao texto, defina color como transparent e defina background-clip: text:

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

Observação: a propriedade background-clip precisa de um prefixo em alguns navegadores, como -webkit-background-clip.

Nesse ponto, você pode deixar assim e experimentar o background-position e o gradiente usado no background-image. Ou você pode animar esse gradiente no texto. Primeiro, defina um frame-chave para a animação. Isso vai usar a propriedade personalizada --bg-size que você definiu anteriormente. Um bom exemplo de propriedades personalizadas com escopo que facilitam a manutenção.

@keyframes move-bg {
  to {
    background-position: var(--bg-size) 0;
  }
}

Em seguida, aplique a animação usando animation:

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: move-bg 8s infinite linear;
}

Para ir além, você pode agrupar o código da animação em uma consulta de mídia para respeitar as preferências de movimento do usuário:

@media (prefers-reduced-motion: no-preference) {
  .boujee-text {
    animation: move-bg 8s linear infinite;
  }
  @keyframes move-bg {
    to {
      background-position: var(--bg-size) 0;
    }
  }
}

Pronto! 🎉 Você criou textos animados em gradiente com CSS usando propriedades personalizadas com escopo e background-clip.

Aqui está essa dica em forma de vídeo rápida! ⚡️

Prefere isso em formato de tweet?

Continue se divertindo! ʕ •ᴥ•ʔ

Imagem principal de Vladislav Klapin no Unsplash