Gerador de gradiente CSS

O que é um gerador de gradiente CSS?#

Um gradiente CSS é uma transição suave entre duas ou mais cores, pintada pelo navegador ao longo de uma linha, um raio ou em torno de um ângulo. Bem usado, um único gradiente pode substituir uma imagem de fundo de 200 quilobytes — ele escala para qualquer tamanho, permanece nítido em qualquer tela e é entregue numa única linha de CSS. A parte difícil não é escrever a sintaxe, é ver o resultado enquanto você ajusta as cores, o ângulo e os pontos.

Esta página é uma bancada ao vivo para isso. Você arrasta os pontos, desliza o ângulo, alterna entre cinco tipos de gradiente, e a página emite a declaração exata linear-gradient(...) (ou radial-, conic-, repetindo) que o seu stylesheet precisa — além de um trecho Tailwind v4 pronto para colar, em @theme, que transforma cada cor num token reutilizável.

Como usar#

1. Escolha um Tipo de gradiente:
   • Linear — as cores transitam ao longo de uma linha reta num ângulo escolhido. O padrão; cobre a maioria dos casos de uso.
   • Radial — as cores irradiam para fora a partir de um ponto central. Bom para holofotes e vinheta.
   • Cônico — as cores varrem em torno de um centro como um gráfico de pizza. Útil para círculos cromáticos e fundos de spinner.
   • Linear repetido / Radial repetido — o mesmo gradiente em mosaico, produzindo faixas ou anéis concêntricos.
2. Para os tipos linear e cônico, arraste o controle de Ângulo (0–359°). A pré-visualização atualiza ao vivo; 0° aponta para cima, 90° aponta para a direita, 135° é a clássica diagonal do canto superior esquerdo ao inferior direito.
3. Para os tipos radiais, escolha uma Forma — Círculo ou Elipse (o padrão para fundos responsivos de tela cheia).
4. Gerencie os seus Pontos de cor:
   • Cada ponto tem uma amostra de cor e uma posição na barra de gradiente (0–100%).
   • Arraste as alças na barra para mover um ponto, ou digite uma posição precisa.
   • Clique em Adicionar ponto para inserir um novo; clique no × de um ponto para excluí-lo.
   • Um gradiente precisa de pelo menos dois pontos.
5. Leia as duas saídas na parte inferior: CSS (o valor bruto do gradiente) e Tailwind v4 (um bloco @theme que registra cada cor como um token --color-grad-*, além de uma utilidade .bg-gradient que as consome). Use o botão de copiar ao lado de cada uma.

Principais funcionalidades#

• Cinco tipos de gradiente numa única ferramenta. Linear, radial, cônico e ambas as variações repetidas — alterne sem redigitar as cores.
• Pré-visualização ao vivo, precisa em pixel. O grande bloco à direita é o gradiente real que você vai entregar; o que você vê é o que o seu stylesheet recebe.
• Barra de pontos com alças arrastáveis. Reposicione qualquer ponto de cor arrastando; o percentual atualiza conforme você move.
• Saída dupla. CSS bruto para stylesheets escritos à mão, e um trecho @theme do Tailwind v4 (cada ponto vira um token --color-grad-*, consumido por uma utilidade .bg-gradient) para projetos utility-first — ambos sempre sincronizados.
• Leitura do ângulo. O grau exato é mostrado ao lado do controle, para que você reproduza um gradiente com precisão em outro lugar.
• Zero envio. Cores, pontos e ângulo nunca saem do navegador.

Exemplo prático#

Suponha que você queira um gradiente de marca calmo, ligeiramente diagonal, indo de índigo a verde-azulado. Escolha Linear, defina o ângulo como 135° e use dois pontos:

• Ponto 1: #4F46E5 em 0% (índigo)
• Ponto 2: #0D9488 em 100% (verde-azulado)

A saída CSS é:

linear-gradient(135deg, #4F46E5 0%, #0D9488 100%)

e o trecho Tailwind v4 é:

@theme {
  --color-grad-1: #4F46E5;
  --color-grad-2: #0D9488;
}

.bg-gradient {
  background-image: linear-gradient(135deg, var(--color-grad-1) 0%, var(--color-grad-2) 100%);
}

Em vez de embutir os valores hex, a saída do Tailwind registra cada ponto como um token de design --color-grad-* dentro de @theme, depois aponta uma única utilidade .bg-gradient para eles através de var(...). Mude uma variável e todo lugar que a consome atualiza de uma vez. Quer uma terceira cor, mais suave, no meio? Clique em Adicionar ponto, defina #7C3AED em 50%, e o trecho ganha um token --color-grad-2: #7C3AED enquanto o verde-azulado desce para --color-grad-3 — os pontos são sempre renumerados por posição, então os nomes nunca saem de sincronia com a barra.

FAQ#

Qual é a diferença entre linear, radial e cônico?#

Linear transita ao longo de uma linha reta definida por um ângulo. Radial transita para fora a partir de um ponto, produzindo um círculo ou elipse de cor. Cônico transita ao redor de um ponto — imagine um círculo cromático girando, onde cada ângulo é um tom diferente. As variações repetidas de cada um dispõem o padrão em mosaico para criar faixas ou anéis.

Por que a saída do Tailwind define variáveis --color-grad-* em vez de embutir as cores?#

O Tailwind v4 mudou a configuração para dentro do CSS através do bloco @theme, onde cada entrada se torna um token de design reutilizável. Ao emitir cada ponto como --color-grad-1, --color-grad-2, … e fazer .bg-gradient referenciá-los via var(...), o trecho lhe entrega uma paleta que você pode reutilizar em qualquer lugar — bordas, texto, sombras — não apenas neste único fundo. Edite uma única variável e todo consumidor atualiza de uma vez. (No Tailwind v3 não há @theme; cole a saída CSS no seu stylesheet em vez disso.)

Posso fazer uma transição brusca de cor em vez de uma mistura suave?#

Sim. Dê a dois pontos a mesma posição — por exemplo #000 50% e #fff 50%. Sem distância entre eles, a mistura tem largura zero, então a transição vira uma linha dura. É assim que você constrói fundos listrados ou em faixas sem uma imagem.

O gradiente cônico parece girado em comparação com a minha ferramenta de design. Por quê?#

Ferramentas diferentes medem o ângulo inicial de um gradiente cônico de forma diferente. O CSS mede o ângulo from no sentido horário a partir do topo (12 horas). Se a sua ferramenta de design mede a partir da direita (3 horas) ou no sentido anti-horário, subtraia ou some 90° (ou inverta o sinal) até a pré-visualização corresponder.