Skip to main content

Gerador de Texto com Gradiente CSS

Gere código CSS para aplicar gradientes ao texto. Pré-visualize cores, direção e ajustes de intervalo em tempo real.

Gradient Text
0%
100%
.gradient-text {
  background: linear-gradient(to right, #ec4899 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 48px;
  font-weight: 700;
}
Compartilhar ferramenta
📖

Como usar

Step 1

Inserir Texto

Inserir Texto

Insira o texto para aplicar um gradiente

Step 2

Definir Gradiente

Definir Gradiente

Ajuste cores do gradiente, direção, tipo, etc.

Step 3

Copiar CSS

Copiar CSS

Copie o código CSS gerado

Recursos

Pré-visualização em Tempo Real

Pré-visualize texto com gradiente em tempo real

Gradientes Variados

Suporta gradientes lineares, radiais e cônicos com múltiplos pontos de cor

Presets Incluídos

Aplique presets de gradientes populares com um clique

FAQ

Uma técnica CSS usando background-clip: text para aplicar fundos gradientes ao texto.