Gerador de gradiente de texto CSS

Como usar

1. Escolha suas cores : selecione duas ou mais cores para o gradiente usando os seletores.
2. Ajuste o ângulo e o estilo : escolha gradiente linear ou radial, ajuste o ângulo e, se quiser, adicione uma posição de parada de cor.
3. Copie o CSS : o código CSS gerado usa background-clip: text e -webkit-background-clip: text para o efeito de texto em gradiente, copie-o diretamente para sua folha de estilo.

Por que usar o gerador de texto em gradiente ?

O texto em gradiente é um dos efeitos CSS modernos mais populares para títulos, logotipos e textos de call-to-action. Obtê-lo exige uma combinação específica de propriedades CSS (background, background-clip, -webkit-text-fill-color) fácil de errar. Este gerador cuida da sintaxe cross-browser automaticamente e oferece uma pré-visualização em tempo real para aperfeiçoar seu gradiente antes de escrever qualquer linha de código.

Funcionalidades

• Várias paradas de cor : adicione quantas paradas de cor forem necessárias para efeitos de gradiente complexos.
• Linear e radial : escolha entre gradientes lineares direcionais e gradientes radiais centrados.
• Controle do ângulo : ajuste o ângulo do gradiente de 0° a 360° com um dial visual.
• Pré-visualização em tempo real : veja seu texto em gradiente ser atualizado em tempo real com seu exemplo.
• CSS cross-browser : a saída inclui os prefixos -webkit e soluções de fallback para máxima compatibilidade.

Perguntas frequentes

Como funciona o texto em gradiente CSS ?

O texto em gradiente CSS funciona aplicando um gradiente como fundo do elemento, depois recortando esse fundo na forma do texto com background-clip: text, e tornando a cor do texto transparente com -webkit-text-fill-color: transparent (ou color: transparent). Apenas o recorte em forma de texto do gradiente é visível.

O texto em gradiente funciona em todos os navegadores ?

O texto em gradiente CSS funciona em todos os navegadores modernos, Chrome, Firefox, Safari e Edge. A propriedade -webkit-background-clip: text é bem suportada. Sempre preveja um fallback em cor sólida para navegadores muito antigos por meio da propriedade color.

Posso usar isso em qualquer tamanho de fonte ?

Sim. O texto em gradiente se adapta perfeitamente ao tamanho da fonte, é CSS puro, não uma imagem, então permanece nítido em qualquer resolução, incluindo telas de alta densidade.

Uma breve história do texto com gradiente na web

O texto com gradiente tornou-se visualmente possível na web com a propriedade -webkit-background-clip: text do WebKit, uma extensão experimental do Safari/Chromium proposta pela equipe WebKit em 2008 como uma forma de preencher as formas dos glifos do texto com um fundo arbitrário (gradiente, imagem, qualquer coisa). A técnica permaneceu não oficial por anos: o Firefox lançou background-clip: text sem prefixo apenas na versão 49 (setembro de 2016), e o CSS Backgrounds Module Level 4 formalizou-a como um rascunho de trabalho do W3C a partir de aproximadamente 2018. A sintaxe de gradiente subjacente amadureceu separadamente. O CSS Images Module Level 3 (Recomendação do W3C 2017) padronizou linear-gradient() e radial-gradient() como valores de imagem de primeira classe; conic-gradient() seguiu no Module Level 4 (Chrome 69 setembro de 2018, Safari 12.1 março de 2019, Firefox 83 novembro de 2020). A combinação dessas duas especificações é o que torna possível hoje um título com gradiente de uma única linha. A adoção explodiu na comunidade de desenvolvedores quando o Tailwind CSS lançou suas classes utilitárias bg-clip-text na v1.4 (2020), transformando os títulos com gradiente em uma primitiva pronta para uso. A identidade de marca moderna agora depende do texto com gradiente como assinatura visual: a série «Bridges» da Stripe, o logotipo com gradiente da Linear, a página de aterrissagem da Vercel, o marketing WWDC da Apple e a loja de templates da Notion usam todos essa técnica. O padrão combinado background-clip: text + gradiente substituiu efetivamente o «PNG de um título estilizado» que dominava o design web 2005-2015, removendo uma categoria de problemas de acessibilidade e desempenho em uma só vez.

A anatomia do texto com gradiente CSS

• O próprio gradiente. background-image: linear-gradient(90deg, #f00, #00f) define o fundo do elemento como um gradiente de 90 graus indo do vermelho ao azul. O gradiente pode ser linear (direcional), radial (centrado), cônico (varredura rotacional), ou qualquer uma das variantes repetidas. Os gradientes CSS são valores de imagem, não valores de cor, o que é o que os torna recortáveis em uma forma de texto.
• background-clip: text. Diz ao navegador para renderizar o fundo apenas dentro da geometria dos glifos renderizados. Sem essa única propriedade, o gradiente preenche toda a caixa do elemento; com ela, o gradiente é restrito ao contorno do texto. Originalmente uma extensão do WebKit com prefixo como -webkit-background-clip: text, agora também sem prefixo no Firefox 49+ (2016) e navegadores baseados em Chromium.
• color: transparent ou -webkit-text-fill-color: transparent. Uma vez que o fundo está recortado para o texto, o resultado visível ainda depende de qual cor o próprio texto pinta sobre o fundo. Definir color: transparent (ou o -webkit-text-fill-color: transparent com prefixo) permite que o gradiente apareça. Sem isso, a cor de texto sólida simplesmente pintaria sobre o gradiente recortado.
• A cadeia de prefixos -webkit-. O Safari, a plataforma com mais histórico de prefixos acumulados, ainda analisa as propriedades sem prefixo mas as versões com prefixo permanecem no código de produção por razões herdadas. A saída deste gerador inclui tanto background-clip: text quanto -webkit-background-clip: text para que a técnica funcione até o Safari 14 e quaisquer navegadores herdados baseados em WebKit.
• Tipos de gradientes e paradas. linear-gradient(angle, color1, color2, ...) vai em uma direção; radial-gradient(shape at position, ...) emana de um ponto; conic-gradient(from angle at position, ...) varre ao redor como um ponteiro de relógio. Cada um aceita arbitrariamente muitas paradas de cor, com posições explícitas (red 0%, blue 50%, green 100%) para um controle fino sobre onde cada cor começa e termina.

Padrões reais de uso de texto com gradiente

• Títulos de identidade de marca. A série «Bridges» da Stripe, o herói de produto da Linear, o banner «Develop. Preview. Ship.» da Vercel usam todos texto com gradiente como assinatura de marca. Wordmarks de cor única parecem datados para SaaS em estágio inicial, enquanto os títulos com gradiente carregam o sinal visual «construído em 2024».
• Títulos de seção herói. O H1 em uma página de aterrissagem é frequentemente o único elemento de texto com o maior orçamento de design. O texto com gradiente lhe dá peso visual sem recorrer a um arquivo de fonte personalizada, um SVG ou uma imagem de herói, que todos adicionam peso de página e preocupações de acessibilidade.
• Páginas de métricas com grandes números. Páginas de preços («$0 para começar»), chamadas de estatística («10× mais rápido») e resumos de dashboard usam texto com gradiente para atrair o olhar para o próprio número. O gradiente substitui efetivamente o padrão «círculo colorido atrás do número» dos designs mais antigos.
• Botões de chamada para ação. Um gradiente sutil no texto do CTA (em vez do fundo do botão) parece mais refinado do que uma cor sólida e combina bem com uma superfície de botão glassmórfica ou neumórfica. A técnica é comum em marcas de fintech e ferramentas de design.
• Destaques de navegação. Um estado ativo ou de hover em um link de navegação pode usar texto com gradiente para fornecer feedback visual sem adicionar sublinhado ou mudança de cor de fundo. Esse padrão é muito usado em sites de documentação (Stripe Docs, Tailwind Docs).
• Modo escuro e designs brand-bridge. O texto com gradiente funciona particularmente bem em fundos escuros porque as cores saturadas se destacam sem competir contra uma superfície clara movimentada. Muitos produtos mantêm títulos de cor sólida no modo claro e mudam para gradiente no modo escuro (usando uma troca de variável CSS).
• Destaques de produtos de e-commerce. Os emblemas «Oferta», «Novo», «Edição Limitada» e os subtítulos de produtos usam texto com gradiente para se diferenciar do corpo do texto sem exigir ativos de ícones. O editor de vitrine da Shopify apresenta o texto com gradiente como opção integrada em 2024.

Considerações de acessibilidade

• WCAG 2.1 SC 1.4.3 Contraste (Mínimo). O critério de sucesso exige pelo menos 4,5:1 de contraste entre o texto e o fundo para texto normal (3:1 para texto grande, definido como 18pt+ ou 14pt em negrito). O texto com gradiente é mais difícil de avaliar porque a razão de contraste varia através do gradiente. A abordagem segura: garantir que a cor mais clara do seu gradiente ainda atenda à razão contra o fundo. Ferramentas como WebAIM Contrast Checker e Stark no Figma podem ajudar.
• Escolha primeiro a cor mais escura do gradiente. Ao parear um gradiente com um fundo claro, escolher a cor mais clara do gradiente para ultrapassar a razão 4,5:1 garante que o resto do gradiente também seja acessível. O mesmo se aplica ao contrário em fundos escuros. O WCAG 2.2 (recomendação outubro de 2023) apertou as diretrizes sobre apresentação visual, incluindo o caso em que o contraste do texto varia ao longo do trajeto.
• Os leitores de tela veem o texto inalterado. Porque o gradiente é puramente um estilo visual (background-clip, color), a tecnologia assistiva lê o conteúdo do texto renderizado independentemente de como ele é colorido. Não há preocupação de «texto alternativo» com o texto com gradiente, ao contrário do texto de imagem rasterizado ou do SVG-texto-sem-elemento-texto.
• prefers-reduced-motion. Gradientes animados (transições de background-position, animações de ciclo de cor) devem ser envolvidos em @media (prefers-reduced-motion: no-preference) para que usuários com transtornos vestibulares ou sensibilidade ao movimento vejam um gradiente estático. O CSS Working Group adicionou a media query em 2017; o suporte de navegador foi universal desde 2020.
• Zoom do navegador e redimensionamento de texto. WCAG 2.1 SC 1.4.4 exige que o texto seja redimensionável até 200% sem perda de conteúdo. O texto com gradiente escala perfeitamente porque é puramente renderizado por CSS (sem rasterização). Usuários com baixa visão que usam zoom Ctrl+/Cmd+ verão o gradiente permanecer nítido em qualquer nível de zoom.
• Folhas de estilo de impressão. A maioria dos navegadores descarta cores recortadas no fundo ao imprimir porque a página impressa espera tinta no papel, e os fundos de gradiente desaparecem. Forneça sempre uma sobrescrição @media print que defina uma color sólida no texto com gradiente para que as cópias impressas permaneçam legíveis. Muitos designers esquecem disso; imprimir um título com gradiente frequentemente produz texto invisível.
• Cadeia de cor de fallback. Sempre defina primeiro uma propriedade color sólida, depois adicione color: transparent (ou -webkit-text-fill-color: transparent) para que navegadores sem suporte a background-clip: text (IE legado, navegadores Android muito antigos) ainda vejam texto de cor sólida em vez de texto invisível. A saída do gerador inclui esse fallback por padrão.

Mais perguntas frequentes

Por que o texto com gradiente é considerado uma assinatura de marca moderna?

Duas razões. Primeiro, a razão técnica: o texto com gradiente tornou-se totalmente compatível entre navegadores apenas por volta de 2017-2020, então os designs que o usam carregam visivelmente o sinal «construído recentemente», do mesmo jeito que o flat design dizia «2013» ou o esqueuomorfismo dizia «2010». Segundo, a razão cultural: Stripe, Linear, Vercel e Apple WWDC popularizaram o texto com gradiente como elemento de identidade de marca na onda 2020-2024 do marketing de fintech e ferramentas para desenvolvedores. Adotar a mesma linguagem visual sinaliza pertencimento a essa linhagem de design.

Como animo um efeito de texto com gradiente?

A técnica mais comum anima background-position em um gradiente superdimensionado. Defina background-size: 200% 200% e anime background-position de 0% 0% para 100% 100% em um loop de 3-5 segundos. Envolva sempre os keyframes em @media (prefers-reduced-motion: no-preference) para que usuários com sensibilidade ao movimento vejam a versão estática. Evite animar paradas de cor individuais diretamente: CSS atualmente não interpola entre valores de gradiente de forma suave entre navegadores, embora CSS @property (Recomendação candidata do W3C 2022) esteja começando a possibilitar isso.

Os motores de busca e leitores de tela podem ver o texto com gradiente?

Sim. O texto com gradiente é texto HTML puro estilizado com CSS; o DOM ainda contém os caracteres reais. Google, Bing, leitores de tela (NVDA, JAWS, VoiceOver) e qualquer ferramenta de extração de texto leem o conteúdo exatamente como se fosse texto comum de cor sólida. Essa é uma das principais razões pelas quais o texto CSS com gradiente substituiu o antigo padrão «PNG de um título estilizado»: essas imagens eram invisíveis para busca e leitores de tela sem texto alternativo manual.

O texto com gradiente funciona em e-mails HTML?

Principalmente não. Outlook desktop (motor de renderização do Word) remove background-clip; o cliente web do Gmail o suporta de forma inconsistente; Apple Mail e clientes Gmail móveis modernos geralmente o renderizam corretamente. Para campanhas por e-mail, a abordagem mais segura é entregar um título de cor sólida de fallback e tratar o texto com gradiente como «melhoria progressiva» para clientes que o suportem. Algumas equipes pré-compõem o título como PNG/SVG com texto alternativo e aceitam o compromisso de acessibilidade.

Quais cores funcionam melhor juntas em um gradiente de texto?

Três padrões dominam. Análogas (cores adjacentes na roda, p.ex. azul → roxo → rosa) dá resultados suaves, amigáveis para a marca, e é o padrão para a maioria dos sistemas de design modernos. Complementares (opostas na roda, p.ex. azul → laranja) cria contraste forte mas pode parecer berrante em texto longo. Tintas de marca (sua cor primária de marca com variação sutil de luminosidade/saturação) produz um efeito sofisticado que parece integrado em vez de decorativo. Evite misturar mais de três cores em um único título; gradientes complexos são melhor reservados para ícones e elementos gráficos.