Gerador de Gradientes CSS Online — Gradientes Lineares, Radiais, Cônicos

Um gradiente linear cria uma transição suave de cor ao longo de uma linha reta. Ajuste o ângulo de 0° a 360° e adicione até 10 cores.

Syntax:

background: linear-gradient(angle, color1 position%, color2 position%);

Examples:

• linear-gradient(90deg, #667eea 0%, #764ba2 100%)
• linear-gradient(135deg, #f857a6 0%, #ff5858 100%)
• linear-gradient(to right, #ee0979 0%, #ff6a00 100%)

Um gradiente radial cria uma transição de cor do centro para fora em forma de círculo ou elipse.

Syntax:

background: radial-gradient(shape size at position, color1, color2);

Examples:

• radial-gradient(circle, #667eea 0%, #764ba2 100%)
• radial-gradient(ellipse at center, #f857a6 0%, #ff5858 100%)
• radial-gradient(circle at top left, #ee0979 0%, #ff6a00 100%)

Um gradiente cônico cria uma transição de cor ao redor de um ponto central. Perfeito para rodas de cores e gráficos.

Syntax:

background: conic-gradient(from angle at position, color1, color2);

Examples:

• conic-gradient(from 0deg, #667eea, #764ba2, #667eea)
• conic-gradient(from 45deg at center, #f857a6 0%, #ff5858 100%)
• conic-gradient(from 90deg, red, yellow, green, blue, red)

Gradientes CSS são amplamente usados em web design moderno para fundos, botões e elementos UI.

• Seções hero com fundo gradiente
• Botões com gradientes
• Cards de produto
• Overlay gradiente em imagens
• Gradientes animados
• Bordas gradiente

Gradientes funcionam bem em dispositivos móveis sem arquivos de imagem pesados.

• Barras de status e navegação
• Telas splash
• Barras de progresso
• Fundos de tela
• Ícones com gradiente
• Telas temáticas

Gradientes servem para criar visualizações e gráficos diretamente no navegador.

• Mapas de calor
• Gráficos com gradientes
• Indicadores de progresso
• Gráficos de linha
• Seletores de cor
• Botões de redes sociais

Todos os modernos: Chrome, Firefox, Safari, Edge, Opera. Lineares e radiais desde 2011, cônicos desde 2017.

Não, a sintaxe padrão funciona em todos os navegadores modernos sem -webkit- ou -moz-.

Tecnicamente sem limite, mas 2-5 são recomendadas. O gerador suporta até 10 cores.

Com ângulo (0-360deg) ou palavras-chave (to top, to right). O gerador tem um controle deslizante.

Gradientes CSS são muito eficientes — renderizados pelo navegador sem requisições HTTP. Muito mais leves que imagens.

Use rgba() ou hsla(). Exemplo: linear-gradient(90deg, rgba(255,0,0,0.8) 0%, rgba(0,0,255,0.5) 100%)