Gerador de CSS para Texto com Gradiente
Gere CSS para texto com gradiente — um gradiente linear ou radial recortado às letras via background-clip: text (com o prefixo -webkit-) e preenchimento transparente. Copie a classe pronta ou o snippet inline.
Entrada
Exibido na prévia e no snippet HTML. A classe CSS é a mesma, independentemente deste texto.
Direção de um gradiente linear.
Saída
Seu texto com gradiente aparecerá aqui.
Adicione isto à sua folha de estilo e aplique class="gradient-text" ao seu elemento.
Span com estilo inline — cole em qualquer lugar, sem folha de estilo.
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/gradient-text-css-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"sampleText": "Gradient Text",
"fontSize": "72",
"fontWeight": "700",
"gradientType": "linear",
"angle": "90",
"color1": "#464aff",
"position1": "0",
"color2": "#ff6b9d",
"position2": "100",
"useColor3": "",
"color3": "#ffd93d",
"position3": "50"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `gradient-text-css-generator` tool (Gradient Text CSS Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/gradient-text-css-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de CSS para Texto com Gradiente — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
Texto com gradiente transforma títulos simples em tipografia chamativa ao pintar um degradê de cores diretamente nas letras, em vez de um preenchimento sólido. Este Gerador de CSS para Texto com Gradiente cria o CSS exato para você: escolha suas cores, direção, tamanho e espessura, acompanhe a prévia ao vivo e depois copie uma classe pronta ou um snippet inline autocontido.
Como funciona o texto com gradiente
O efeito depende de uma combinação inteligente de propriedades CSS. Você define o gradiente como background-image do elemento, recorta esse fundo no formato das letras com background-clip: text e, em seguida, torna o preenchimento do texto transparente para que o gradiente apareça:
.gradient-text {
background-image: linear-gradient(90deg, #464aff 0%, #ff6b9d 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
display: inline-block;
}As linhas -webkit-background-clip e -webkit-text-fill-color são a chave para a ampla compatibilidade com os navegadores — Chrome, Safari e outros navegadores WebKit/Blink precisam das versões com prefixo, e este gerador sempre as inclui para que seu texto seja exibido em qualquer lugar.
Usando o gerador
- Digite seu texto de exemplo para vê-lo na prévia ao vivo.
- Escolha o tipo de gradiente — linear para uma varredura reta pelas letras, ou radial para um brilho que se espalha a partir do centro.
- Defina o ângulo (para gradientes lineares) para controlar a direção da varredura, de
0deg(de baixo para cima) até90deg(da esquerda para a direita). - Adicione paradas de cor. Duas cores vêm habilitadas por padrão; marque "Adicionar uma terceira parada de cor" para uma mistura mais rica, com várias cores. Cada parada tem uma posição de 0% a 100%.
- Ajuste o tamanho e a espessura da fonte para combinar com o título que você está estilizando.
A ferramenta gera duas coisas: uma classe CSS .gradient-text para incluir na sua folha de estilos e um span HTML autocontido com os estilos embutidos — útil para modelos de e-mail, blocos de CMS ou qualquer lugar em que você não possa adicionar uma folha de estilos.
Por que meu texto com gradiente parece cortado?
Como o fundo é recortado conforme o texto, o elemento precisa de display: inline-block (ou block) para que o recorte seja dimensionado corretamente — este gerador adiciona isso automaticamente. Se as descendentes de alguma letra forem cortadas, acrescente um pouco de line-height ou padding ao elemento.
O texto com gradiente é acessível?
Gradientes podem reduzir o contraste, então mantenha a cor mais escura da mistura legível em relação ao seu fundo e reserve o efeito para títulos grandes, em vez de textos corridos. Leitores de tela leem o texto subjacente normalmente, então não há nenhuma desvantagem semântica.
Isso envia meu texto para algum lugar?
Não. O CSS é gerado inteiramente no seu navegador — nada é enviado, e a ferramenta funciona offline depois que a página é carregada.