Text Gradient Generator
Crie efeitos de texto com gradiente CSS usando background-clip. Pré-visualização ao vivo, copie CSS ou SVG instantaneamente.
① Digite seu texto ② Personalize cores, ângulo e estilo ③ Copie o CSS do gradiente
Texto
Tamanho
Peso
Fonte
Alinhamento
Tipo
Color stops
0%
100%
Predefinições
Hello World
background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;
O que é texto com gradiente CSS?
O texto com gradiente CSS usa a técnica background-clip: text para aplicar um gradiente como cor de preenchimento do texto. Definindo -webkit-text-fill-color: transparent e background-clip: text, a imagem do gradiente fica visível através da forma do texto. Funciona com linear-gradient, radial-gradient e conic-gradient.
FAQ
background-clip: text recorta o fundo do elemento à forma do seu texto. Combinado com -webkit-text-fill-color: transparent, o gradiente usado como fundo fica visível apenas através dos caracteres do texto.
-webkit-text-fill-color substitui color para o preenchimento do texto em motores WebKit/Blink. Usar apenas color: transparent pode não ocultar completamente o preenchimento do texto em todos os navegadores.
Gradientes lineares transicionam cores ao longo de uma linha reta em um ângulo escolhido. Os radiais irradiam do centro para fora. Os cônicos varrem cores ao redor de um ponto central como uma roda de cores.
O suporte é excelente. Chrome, Edge, Opera e Firefox suportam background-clip: text sem prefixo. Safari requer o prefixo -webkit-background-clip: text. Esta ferramenta gera ambas as propriedades para compatibilidade completa.
Defina background-size para 200% 200% e anime background-position em uma regra @keyframes. Por exemplo: @keyframes gradientShift { 0% { background-position: 0% 50% } 100% { background-position: 100% 50% } }.
O texto com gradiente funciona melhor para títulos hero, títulos de seção, nomes de marca e elementos decorativos. Evite para texto de corpo ou tamanhos pequenos onde os gradientes reduzem a legibilidade.
Verifique o contraste para o color stop mais claro em relação ao fundo. Não dependa apenas da cor para transmitir significado. Teste em tamanhos de fonte menores para confirmar a legibilidade.