Gerador de texto em degradê (CSS)

Gerador de texto em degradê (CSS): para que serve

Título com as letras em degradê chama atenção na página inicial e em landing pages, e é feito só com CSS: o degradê vira o fundo do texto e background-clip: text recorta esse fundo no formato das letras.

O gerador monta o código com o prefixo -webkit-, uma cor de reserva para navegadores sem suporte, o ajuste para o modo de alto contraste do Windows e, se você quiser, a animação do degradê que para para quem prefere menos movimento. A prévia mostra o título no fundo claro e no escuro.

Como usar

1. Escreva o texto e escolha a fonte e o tamanho.
2. Escolha as cores e o ângulo.
3. Copie o CSS e aplique a classe no título.

Quando usar

• Título da página inicial.
• Destaque de preço ou de chamada.
• Logotipo em texto.

Perguntas frequentes

Como o texto em degradê é feito?

O degradê é o fundo do elemento, e a propriedade background-clip: text recorta esse fundo no formato das letras; a cor do texto fica transparente para o fundo aparecer. Funciona com qualquer fonte e o texto continua selecionável e lido por leitores de tela.

Precisa do prefixo -webkit-?

O código inclui -webkit-background-clip junto com a versão sem prefixo, porque navegadores um pouco mais antigos só aceitam com prefixo. A cor de reserva aparece onde nada disso funcionar.

Dá para usar em parágrafos?

Funciona, mas é melhor reservar para títulos e destaques curtos. Em texto corrido o degradê cansa a leitura e as partes mais claras podem ficar sem contraste com o fundo.

É grátis mesmo?

Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.

Ferramentas parecidas