Como colocar um gradiente no texto com CSS sem perder a leitura

Para colocar um gradiente no texto com CSS, pinte o gradiente como fundo do elemento, recorte esse fundo no formato das letras e deixe as próprias letras transparentes para que o fundo apareça através delas. São três declarações:

.title {
  background-image: linear-gradient(90deg, #6d28d9, #db2777);
  background-clip: text;
  color: transparent;
}

Essa é a técnica inteira. O resto desta página trata do que dá errado, porque texto transparente é algo arriscado de publicar.

Por que não posso usar um gradiente como cor do texto?

A propriedade color aceita uma única cor, e um gradiente não é uma cor: é uma imagem. Imagens só são aceitas por propriedades que esperam uma, como background-image, border-image e list-style-image. Por isso color: linear-gradient(...) é simplesmente inválido e o navegador descarta a linha.

O gerador de gradientes CSS escreve justamente esse tipo de linha, e só ela. A saída é background-image: linear-gradient(...); (ou o equivalente radial ou cônico), uma única camada, em sRGB. Ele não escreve as linhas do recorte nem um reserva, então, para texto, você copia a linha dele e acrescenta as outras duas.

O que cada uma das três declarações faz?

background-image pinta o gradiente sobre a caixa do elemento. background-clip: text restringe essa pintura à área coberta pelos glifos, de modo que o gradiente só aparece dentro das letras. color: transparent tira o preenchimento sólido das letras, que de outro modo ficaria por cima e o esconderia. A MDN observa que o recorte tem pouco efeito visível se o texto for total ou parcialmente opaco, e por isso a terceira linha não é opcional.

Versões antigas do Safari e do Chrome só entendiam a forma com prefixo, -webkit-background-clip: text, e muitas folhas de estilo ainda trazem as duas linhas. Manter a linha com prefixo não custa nada; se você ainda precisa dela depende do navegador mais antigo que você suporta, e a tabela de compatibilidade da MDN é o lugar para conferir.

Um detalhe pega quase todo mundo na primeira tentativa. Um título é um elemento de bloco, então o fundo dele ocupa a largura inteira do contêiner, e não a largura das palavras. Um título curto numa coluna larga mostra só a primeira fatia do seu gradiente. Faça o elemento se ajustar ao texto com display: inline-block ou width: fit-content, e o gradiente vai da primeira letra à última.

O que acontece se o recorte falhar?

O texto some. color: transparent funciona sozinho, com ou sem o recorte, então um navegador que ignora background-clip: text ainda respeita o preenchimento transparente e mostra uma caixa de gradiente sem letras recortadas, ou nada se o fundo não carregar. A orientação da MDN é dar um reserva e usar uma consulta de recursos para que a cor transparente só valha onde o recorte funciona:

.title {
  color: #6d28d9;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .title {
    background-image: linear-gradient(90deg, #6d28d9, #db2777);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

@media print {
  .title {
    background: none;
    color: #000;
  }
}

A cor sólida é o padrão, e o gradiente é um upgrade para os navegadores que conseguem exibi-lo. A regra de impressão existe porque os navegadores costumam deixar de fora os gráficos de fundo ao imprimir, a menos que a pessoa marque uma caixa, e um fundo recortado continua sendo um fundo. Abra a visualização de impressão da sua própria página antes de decidir que não precisa dela.

O contraste precisa ser conferido nas duas pontas?

Sim, e também no meio, e de novo em cada fundo de página em que o título possa aparecer. O contraste é medido entre o texto e o que está atrás dele, e com texto em gradiente a cor do texto muda ao longo da linha. O número que conta é o pior de todos, com a mesma lógica dos limites da WCAG aplicada a cada ponto, e não a um só.

O gradiente de exemplo mostra como isso dá errado. Sobre uma página branca, a ponta violeta (#6d28d9) tem razão de contraste de cerca de 7,1:1 e a rosa (#db2777) de cerca de 4,6:1, então as duas passam do limite de 4,5:1 para texto normal. Coloque o mesmo título numa página escura (#111827) e os números caem para cerca de 2,5:1 no violeta e 3,9:1 no rosa. A ponta violeta já não atinge nem o 3:1 que o texto grande exige. Nada mudou no gradiente; mudou o fundo, que é a mesma armadilha descrita em escolher cores para o modo escuro.

Confira cada parada no verificador de contraste contra o fundo da página. Para o meio, lembre que os navegadores misturam por padrão os gradientes sRGB canal por canal, então o ponto médio de duas paradas é a média dos valores de canal delas. No exemplo, isso dá #a428a8, com cerca de 6,1:1 sobre branco e 2,9:1 sobre a página escura. Se duas paradas estiverem muito distantes em luminosidade, o meio pode ser o ponto mais fraco, como mostra o problema do meio cinza.

O que esse método, e essas ferramentas, não conseguem fazer?

Há três limites que vale conhecer antes de construir em cima disso.

• O verificador de contraste recebe duas cores hexadecimais opacas. Ele não consegue amostrar um gradiente, então você confere as paradas e o ponto médio calculado um a um, e um gradiente com muitas paradas ou em forma radial exige mais conferências.
• O gerador escreve uma única camada sRGB e nenhuma linha de recorte ou de reserva, como descrito acima. Se você quiser outro espaço de interpolação, acrescenta à mão na linha copiada.
• Texto com gradiente é decoração. Um parágrafo longo composto assim é mais difícil de ler do que as mesmas palavras em cor sólida, porque a cor muda o tempo todo sob o seu olhar. Serve para um título de poucas palavras em tamanho grande.

Não testei todas as combinações de navegador, modo de contraste do sistema operacional e tecnologia assistiva. Trate o reserva acima como um mínimo, e teste a página nas configurações que seus leitores provavelmente usam.

Última atualização 23 de outubro de 2026