O que é Gerador de gradientes?

Um criador visual de gradientes CSS que permite criar gradientes lineares, radiais e cônicos com paradas de cor ilimitadas. Ajuste ângulos, posições e cores em tempo real e copie o CSS com um clique.

Escolha entre gradientes lineares, radiais e cônicos, defina um ângulo de 0° a 360° e adicione quantas paradas de cor precisar, com opacidade por parada para sobreposições transparentes. Comece a partir de uma predefinição caprichada como Pôr do sol, Instagram ou Oceano e depois ajuste as cores. Nos radiais você pode escolher a forma de círculo ou elipse e uma palavra-chave de extensão, e trocar a mistura para OKLab ou OKLCH para uma interpolação moderna mais suave, ou aplicar uma curva de suavização. Ative Animar para obter um laço @keyframes pronto para colar e criar um fundo em movimento. A saída é CSS puro que você cola numa folha de estilos, na configuração do Tailwind ou na sua ferramenta de design.

Como usar

1. Passo 1 — Escolha o tipo de gradiente (linear, radial ou cônico) e defina a direção ou ângulo usando o controle deslizante ou os botões predefinidos.
2. Passo 2 — Adicione paradas de cor clicando na barra de gradiente. Ajuste a cor e a posição de cada parada arrastando ou inserindo valores exatos.
3. Passo 3 — Visualize o gradiente ao vivo e copie o código CSS gerado para a área de transferência ou baixe-o como arquivo CSS.

Quando usar

• Desenhar hero sections, botões e fundos de cartão sem abrir o Photoshop.
• Aplicar a paleta da marca de forma uniforme em site, e-mail e slides.
• Testar o efeito em CSS antes de passar a especificação para o desenvolvedor.

Resultado

Digamos que você quer um fundo hero com tema de pôr do sol. Escolha um gradiente linear de 135°, coloque laranja em 0%, rosa em 50% e roxo em 100%, e copie o CSS para sua folha de estilos.

Perguntas frequentes

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

O linear percorre as cores numa linha reta no ângulo escolhido. O radial espalha do centro para fora, lembrando um sol. O cônico varre as cores em volta de um ponto central, útil para gráficos de pizza ou rodas de cor.

Quantas paradas de cor posso adicionar?

Não há limite rígido. A maior parte dos designs usa de duas a quatro paradas. Acima de cinco ou seis o gradiente fica embaçado porque as cores se misturam e as transições nítidas que você queria desaparecem.

Por que meu gradiente aparece com bandas no fundo escuro?

As faixas aparecem quando cores adjacentes têm luminância muito parecida. Aumente o contraste entre as paradas, mude a mistura de cor para OKLCH ou OKLab para interpolação perceptual, ou adicione uma camada sutil de ruído no CSS.

Dá para usar esses gradientes no Figma ou Sketch?

O CSS em si não cola direto, mas valores de cor e posições são traduzidos um a um. Copie o hex e a porcentagem de cada parada para o editor de gradientes da sua ferramenta de design.

O que o ângulo faz exatamente?

No linear, 0° aponta para cima e o ângulo gira no sentido horário: 90° vai da esquerda para a direita, 180° de cima para baixo. No cônico, o ângulo define onde começa a varredura no círculo.

Ferramentas relacionadas