Tutoriais

fevereiro 2, 2026
08:30

Como criar Degradê animado em texto com HTML e CSS

Você já reparou em sites modernos que utilizam títulos com cores vibrantes que parecem se mover? Certamente, esse efeito de degradê animado em texto é uma das tendências de design que mais captam a atenção do usuário hoje em dia.

Embora pareça um recurso complexo de implementar, você pode alcançar esse resultado utilizando apenas HTML e CSS puro. Além disso, essa técnica é extremamente leve e não impacta a performance do seu site. Neste tutorial, vamos construir esse efeito passo a passo, garantindo que você entenda cada detalhe da implementação.

Estrutura Básica: O HTML

Primeiramente, precisamos definir a estrutura simples do nosso documento. No arquivo HTML, utilizaremos apenas uma div para conter o nosso título principal. Dessa forma, mantemos o código limpo, o que é o primeiro passo para um site bem otimizado para os motores de busca.

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Degradê no Texto</title>
    <link rel="stylesheet" href="src/style.css">
</head>
<body>
    <div class="text">
        <h1>MEU GUIA DEV</h1> 
    </div>
</body>
</html>

Neste código, definimos o título dentro de uma classe chamada .text. Consequentemente, isso facilitará a nossa estilização e garantirá que o efeito seja aplicado exatamente onde desejamos.

Estilizando e Animando: O CSS

Agora, vamos para a parte onde a mágica realmente acontece. Para criar o efeito, utilizaremos a propriedade background-image em conjunto com o background-clip. O segredo aqui, no entanto, é fazer o fundo ser muito maior que o texto. Portanto, o degradê terá espaço suficiente para se movimentar de forma fluida.

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #000;
}

.text h1 {
    font-size: 130px;
    font-weight: 800;

    /* Aqui você cria o degradê */
    background-image: linear-gradient(45deg, #009d71, #71c5a6, #005323, #009d71);
    background-size: 400% 100%;

    /* Aplica a animação */
    animation: degrade-animation 15s linear infinite alternate;

    /* Fazendo o fundo aparecer apenas no texto */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Definição da animação */
@keyframes degrade-animation {
    0% {
        background-position-x: 0%;
    }
    100% {
        background-position-x: 400%;
    }
}

Entendendo o Código

Para que você não apenas copie, mas aprenda a lógica, vamos desmembrar as propriedades principais. De fato, entender esses conceitos permitirá que você crie suas próprias variações no futuro:

linear-gradient: Definimos quatro cores para criar um degradê rico. Note que repetimos a primeira cor ao final para que a transição seja imperceptível ao olhar humano.
background-size: 400%: Imagine que o seu degradê é um tapete muito comprido. Ele precisa ser muito maior que o texto para que possamos movê-lo lateralmente.
-webkit-background-clip: text: Essa é a propriedade que faz a mágica. Ela “corta” o fundo no formato exato das letras. Por isso, a cor original do texto deve ser transparente.
@keyframes: Criamos o movimento alterando a posição do fundo. Além disso, o efeito alternate evita aquele “pulo” visual seco quando a animação reinicia.

Personalização e Boas Práticas

Certamente, você pode adaptar este código para a identidade visual do seu projeto. Portanto, aqui estão algumas sugestões:

Velocidade: Se você busca algo mais energético, mude de 15s para 5s. Por outro lado, para um blog corporativo, tente 30s.
Direção: Altere os graus no linear-gradient. Logo, experimente 90deg ou 180deg para movimentos horizontais ou verticais.
Acessibilidade (Importante): Sempre garanta que as cores do seu degradê tenham contraste suficiente com o fundo do site. Se o usuário tiver dificuldades visuais, um texto que se move muito rápido ou com cores muito próximas ao fundo pode prejudicar a leitura.

Por que utilizar este efeito?

Atualmente, o diferencial de um bom desenvolvedor está na performance. Diferente de usar um GIF ou um vídeo, o CSS puro consome quase zero de processamento.

Além do mais, como o conteúdo é texto real, os robôs do Google conseguem ler sua palavra-chave perfeitamente. Dessa maneira, você une um design incrível com as melhores práticas de SEO. O uso da fonte Montserrat também colabora para uma leitura clara, mesmo com efeitos visuais intensos.