Gerador de Gradientes

Crie gradientes lineares, radiais e cônicos com 2 a 5 cores e ângulos próprios. Prévia ao vivo, presets, aleatório (Espaço), saída Tailwind e CSS, download PNG. Pressione Espaço para aleatório.

ou Espaço

Direção e forma

Ângulo 135°

Paradas de cor (2)

Saída CSS

O que é um gerador de gradientes?

Transições suaves de cor, zero imagens

Um gradiente mistura duas ou mais cores ao longo de uma linha, a partir de um centro, ou ao redor de um ponto. Navegadores renderizam como CSS nítido e independente de resolução, perfeito para heroes, botões, cards e sobreposições com zero requisições de rede.

Esta ferramenta vai além do básico de 2 cores: tipos linear, radial e cônico, até 5 paradas com posições, 8 presets, inspiração aleatória, classes arbitrárias Tailwind, e exportação PNG.

Como usar

Escolha tipo e cores

Linear, radial ou cônico. Edite cada parada com seletor, HEX ou controle 0-100%. Adicione até 5, remova até 2.

Defina a direção

Controle de ângulo e presets de 45° para linear e cônico, forma e posição para radial. Teste presets ou Espaço para aleatório.

Copie e publique

Copie CSS ou Tailwind, baixe CSS e PNG, ou compartilhe a URL, paradas e ângulo ficam em ?type=&angle=&stops=.

Exemplos reais

Fundos de hero: 135deg índigo para rosa

Banhos diagonais de 2 cores ficam legíveis sob texto branco e cabem em uma linha CSS. Comece pelo preset Índigo Rosa.

Botões e CTAs: 90deg com 3 paradas

Trios estilo pôr do sol dão profundidade a elementos pequenos. Mantenha a parada do meio perto de 50% para misturas pares no hover.

Brilhos e holofotes: radial

Elipse radial no topo cria aurora suave atrás de cards. Combine com superfícies escuras para sobreposições com contraste seguro.

Anéis de progresso: cônico

Varreduras cônicas de ângulo servem a gráficos de pizza e loaders. Duas paradas com posições duras dão anéis segmentados.

Publicando com Tailwind

Copie a classe arbitrária bg-[linear-gradient(...)] direto para o markup, ou salve o snippet de config para reuso.

Imagens sociais e OG

Baixe snapshots PNG 1200×630 para capas, thumbnails e placeholders sem abrir ferramenta de design.

Gradientes animados e texto em gradiente

Reuse qualquer saída: anime background-position para fundos brilhantes, ou combine com background-clip:text para títulos em gradiente. Copie o CSS e some dois keyframes.

Perguntas frequentes

1Como faço um gradiente CSS?

Escolha um tipo, defina 2 a 5 cores com posições, ajuste ângulo e centro, e copie a linha background:. Caminho mais fácil: escolha um preset, ajuste uma parada, clique em Copiar CSS.

2Linear vs radial vs cônico: quando usar cada?

Linear para heroes e botões ao longo de um ângulo. Radial para brilhos que partem de um ponto (holofotes, aurora). Cônico para varreduras ao redor de um centro como pizzas, loaders e rodas de cores.

3Qual a diferença entre “to right” e “90deg”?

Palavras-chave vão de canto a canto conforme o formato da caixa. Ângulos são direções exatas de bússola (0° vai para cima, 90° para a direita, sentido horário). Saímos em graus para o gradiente ficar igual em qualquer proporção.

4Como paradas e posições funcionam? Dá para fazer listras?

Cada parada é cor e 0-100%. Espalhe par para misturas suaves. Empilhe duas paradas na mesma posição para borda listrada dura. Adicione até 5, remova até 2.

5Recebo Tailwind, PNG e links para compartilhar?

Sim, todo gradiente mostra CSS mais Tailwind arbitrário bg-[...]. O popup de download oferece CSS, Tailwind ou PNG 1200×630. A URL guarda tipo, ângulo e paradas para compartilhar.

6Funciona em todos os navegadores? Meu trabalho é enviado?

Linear, radial e cônico são base desde 2015 nos navegadores modernos. Grátis para sempre, sem cadastro, e nada sai do seu navegador.

Gerador de Paletas

Harmonias aleatórias + modo imagem

Conversor de Cores

HEX RGB HSL HSV CMYK LAB

Verificador de Contraste

Notas de legibilidade de texto WCAG

Gerador de Paleta de Imagem

Extraia a paleta de qualquer foto