Gerador de degradados CSS online grátis

O degradado CSS se tornou a maneira mais leve e flexível de revestir um fundo, um botão ou um card. Acabou exportar PNG de um editor de imagens: o navegador calcula a transição entre suas cores, em vetor, com algumas dezenas de bytes. O gerador de degradados CSS do Volade produz o código exato — ângulo, stops, posição de origem — enquanto você compõe na tela.

linear-gradient: o degradado direcional

A função linear-gradient() recebe um ângulo seguido dos stops: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%). O ângulo 0deg aponta para cima, 90deg para a direita, 180deg para baixo. Sem ângulo, o navegador vai de cima para baixo. É a sintaxe mais usada para headers, botões de call-to-action e faixas de seção.

radial-gradient: o brilho e a elipse

A função radial-gradient() parte de um ponto (por padrão o centro) e se espalha em círculo ou elipse. A posição de origem é escrita como at X% Y%: radial-gradient(circle at 50% 50%, …). Perfeita para um efeito de brilho atrás de um título, um fundo de hero centrado no meio ou uma sombra suave sintética. A ferramenta expõe dois controles X e Y para posicionar a origem no pixel.

conic-gradient: a rotação em torno de um ponto

A função conic-gradient() gira em torno de um ponto, como os ponteiros de um relógio. Ela é escrita conic-gradient(from 90deg at 50% 50%, …) e permite criar anéis, medidores circulares, bordas coloridas ou efeitos prismáticos. Cada stop ocupa um setor angular: ao colocar várias cores, você desenha um gráfico de pizza CSS sem uma única imagem.

Os stops de cor (color stops)

Cada stop associa uma cor e uma posição em porcentagem: #7a2fe2 0%, #a358ee 55%, #f3e8ff 100%. Posições idênticas em duas cores criam uma transição dura (borda dura); posições distantes produzem um fade gradual. Mais de dois stops permitem paletas multicoloridas, faixas ou simulações de materiais (metal, madrepérola, aurora boreal).

Sobrepor um degradado e prever um fallback

No atalho background, a ordem importa: primeiro o plano da frente. Um véu escuro sobre foto se escreve background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0)), url(photo.webp);. Coloque sempre uma cor sólida como fallback (background-color) para navegadores muito antigos ou durante o carregamento da imagem.

Boas práticas de performance

Um degradado CSS é recalculado a cada redimensionamento: mantenha o número de stops razoável (2 a 5 bastam em 90 % dos casos) e evite sobreposições múltiplas em superfícies muito grandes no mobile. Prefira valores hexadecimais ou HSL estáveis e congele o ângulo assim que o design for aprovado para evitar microdiferências entre navegadores.

Degradados com a identidade Volade

Para construir uma paleta coerente antes de criar os degradados, combine o gerador de paletas e o seletor de cores : identifique as cores da marca e cole-as aqui como stops. O resultado é copiado direto para o seu CSS, o seu design system ou o seu tema — no computador e no celular, sem conta e sem envio de dados.