Toolzi LogoToolzi

Gerador de Texto com Gradiente CSS

Gere efeitos de texto com gradiente CSS instantaneamente. Personalize cores e direção, visualize ao vivo e copie o código CSS.

0%
100%

Prévia

Hello World
48px

Código CSS

.gradient-text {
  background: linear-gradient(to right, #6366f1 0%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

O que é texto com gradiente CSS?

O texto com gradiente CSS aplica um gradiente de cor ao texto usando um gradiente como fundo do elemento e recortando-o para a forma do texto com background-clip: text. Esta técnica cria tipografia chamativa sem imagens.

Como aplicar gradiente ao texto em CSS

Defina um fundo gradiente no elemento, depois aplique -webkit-background-clip: text e -webkit-text-fill-color: transparent. A propriedade background-clip: text recorta o fundo para o texto, revelando o gradiente através das letras.

Compatibilidade de Navegadores

-webkit-background-clip: text é suportado por todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge. A propriedade padrão background-clip: text também é bem suportada. Sempre inclua ambas as versões para cobertura completa.

Perguntas Frequentes

Como faço texto com gradiente em CSS?
Aplique um gradiente como fundo, depois use -webkit-background-clip: text e -webkit-text-fill-color: transparent para mostrar o gradiente através do texto.
O texto com gradiente CSS funciona em todos os navegadores?
Sim. -webkit-background-clip: text é suportado por todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge.
Posso usar gradientes radiais ou cônicos para o texto?
Sim. Qualquer tipo de gradiente CSS (linear, radial, conic) pode ser usado como fundo para texto com gradiente.
Por que preciso de -webkit-text-fill-color: transparent?
-webkit-text-fill-color substitui a cor do texto em navegadores WebKit. Ao defini-lo como transparent, o fundo gradiente fica visível através do texto.
Posso animar o texto com gradiente CSS?
Sim. Você pode animar background-position ou usar CSS @keyframes com background-size para criar efeitos de texto com gradiente animados.
Qual é a diferença entre color e -webkit-text-fill-color?
-webkit-text-fill-color tem precedência sobre color em navegadores que o suportam, permitindo que o fundo gradiente seja visível através do texto.

Ferramentas Relacionadas

CSS Gradient Generator →