Como funciona o texto com gradiente em CSS?

O CSS não tem uma propriedade de «gradiente de texto». O truque habitual é aplicar um gradiente como plano de fundo do elemento, recortar esse plano de fundo no formato das letras com background-clip: text e tornar transparente o preenchimento do texto para que o gradiente apareça.

Descrição da ferramenta

Digite seu texto, escolha uma cor inicial e uma cor final, defina o ângulo e a ferramenta exibirá uma pré-visualização em tempo real e fornecerá o CSS para copiar. Você também pode alterar a família, o peso e o tamanho da fonte para que a pré-visualização corresponda ao que será usado na sua página.

A regra gerada é semelhante a esta:

.gradient-text {
  background-image: linear-gradient(135deg, #f97316 0%, #0ea5e9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
CSS

O resultado completo também inclui as configurações da fonte e as regras de quebra de linha.

Recursos

  • Gradiente linear de duas cores, com ângulo de 0 a 360 graus
  • Controles da família, do peso e do tamanho da fonte
  • Pré-visualização em tempo real que você pode exportar como imagem, além de CSS pronto para colar