Anúncios incomodam? Ir Sem anúncios Hoje 

Gerador de Texto Gradiente com CSS

CorDesenvolvedor

[iotools_gradient_text_css_generator]

Guia

Gerador de Texto Gradiente com CSS

Crie efeitos de texto impactantes com gradientes de múltiplas cores e copie CSS pronto para produção em um único clique. Escolha suas cores, escolha linear ou radial, veja a prévia em tempo real atualizando, depois cole o snippet no seu estilo de folha.

Como usar

Digite o texto de exemplo que deseja visualizar.
Defina o tamanho e o peso da fonte para corresponder ao seu design.
Escolha um tipo de gradiente — linear (com ângulo ou direção nomeada) ou radial (com forma e posição).
Escolha dois ou mais pontos de cor e ajuste suas posições.
Copie a classe CSS e o snippet HTML gerado.

Características

Pré-visualização em tempo real – Veja o efeito em texto real enquanto ajusta cores, ângulo e pontos de cor.
Gradientes lineares e radiais – Escolha por ângulo, direção nomeada ou forma e posição radial.
Até quatro pontos de cor – Adicione cores intermediárias com porcentagens personalizadas.
CSS compatível com navegadores – A saída inclui ambos background-clip e -webkit-background-clip para compatibilidade ampla.
Alternador de fundo – Alternar a prévia entre quadro, claro e escuro para testar contraste.
Copiar ou baixar – Obtenha o snippet de CSS mais um span pronto para colar.

Quando usar texto com gradiente

O texto com gradiente é ótimo para cabeçalhos de destaque, páginas de lançamento de marketing, marcas em forma de palavras e destaque de recursos, onde um único cor sólida pareceria plano. Use com parcimônia — pesos grandes e títulos curtos se destacam melhor, enquanto o corpo do texto deve permanecer em cores sólidas para legibilidade.

ANUNCIADO Remover?

 Perguntas frequentes

Como funciona background-clip: text?

O navegador desenha a imagem de fundo do elemento dentro da forma dos glyphs renderizados, em vez do todo do elemento. Combinado com uma cor de texto transparente, o gradiente ou imagem só será visível através do contorno do texto, enquanto o restante do elemento permanece vazio.
Por que ainda é necessário o propriedade -webkit-text-fill-color?

Navegadores antigos baseados em WebKit e Safari exigiam historicamente -webkit-text-fill-color: transparent para tornar os glyphs de texto transparentes, assim que o fundo recortado pudesse ser exibido. Navegadores modernos também aceitam a cor padrão: transparent, então incluir ambos maximiza a compatibilidade entre versões e plataformas.
Qual a diferença entre gradientes lineares e radiais?

Um gradiente linear transita cores ao longo de um eixo retificado definido por um ângulo ou palavra-chave de direção. Um gradiente radial transita para fora de um único ponto em círculos ou elipses concêntricos, produzindo um efeito de luz de spot ou esfera.
Os efeitos de texto com gradiente são acessíveis?

O texto com gradiente pode reduzir o contraste percebido contra o fundo. Escolha pontos de cor com contraste luminoso suficiente contra a superfície circundante, evite usar preenchimento com gradiente para corpo do texto e sempre forneça uma cor de backup sensata no caso de background-clip não ser suportado.