Gerador de gradiente CSS

Gradientes CSS sem decorar a sintaxe

Gradientes CSS substituem imagens de fundo por código: não pesam nada, escalam para qualquer tamanho sem perder qualidade e podem ser alterados em um segundo. O problema é a sintaxe, com ângulos, formas, posições e paradas de cor que são difíceis de visualizar só lendo. Este gerador permite montar o gradiente olhando a prévia e copiar o código no final.

Você pode criar os três tipos de gradiente do CSS. No linear, escolha o ângulo ou a direção. No radial, defina a forma (círculo ou elipse) e a posição do centro. No cônico, as cores giram em torno de um ponto, útil para gráficos de pizza e efeitos de brilho. Em todos, adicione quantas paradas de cor quiser, cada uma com cor, opacidade e posição em porcentagem.

Se preferir começar de algo pronto, há gradientes predefinidos que você pode ajustar. A prévia é atualizada em tempo real e o resultado sai como uma declaração background: linear-gradient(...) (ou radial e cônico), pronta para colar no seu CSS. Cores com opacidade permitem sobrepor o gradiente a uma imagem, criando aquele escurecimento usado para deixar texto legível em banners.

O gerador funciona no seu navegador e é gratuito, sem limites: crie e copie quantos gradientes quiser, sem precisar do Pro.

Como criar um gradiente CSS

1. 1Escolha o tipo: linear, radial ou cônico, ou comece por um gradiente predefinido.
2. 2Ajuste o ângulo ou a direção; no radial, a forma e a posição.
3. 3Adicione ou remova paradas de cor e defina cor, opacidade e posição de cada uma.
4. 4Confira o resultado na prévia ao vivo.
5. 5Clique em copiar e cole o CSS no seu projeto.

Onde usar gradientes CSS

• Fundos de seções hero e landing pages.
• Botões e cards com mais profundidade.
• Sobreposição escura sobre imagens para dar contraste ao texto.
• Gráficos de pizza e indicadores circulares com conic-gradient.
• Bordas e textos com gradiente (combinado com background-clip).
• Substituir imagens de fundo pesadas por código.

Linear, radial e cônico: como cada um funciona

• linear-gradient(90deg, ...): as cores mudam ao longo de uma linha; 0deg vai de baixo para cima e 90deg da esquerda para a direita.
• radial-gradient(circle at center, ...): as cores se espalham a partir de um ponto, em forma de círculo ou elipse.
• conic-gradient(from 0deg, ...): as cores giram em torno do centro, como os ponteiros de um relógio.
• Duas paradas na mesma posição criam uma transição dura, útil para listras.
• Para esmaecer até sumir, use a mesma cor com opacidade 0 na última parada, como o gerador faz ao baixar a opacidade de uma cor.

Perguntas Frequentes