Gerador de Gradiente CSS
Gere gradientes CSS lindos com visualização ao vivo. Crie gradientes lineares, radiais e cônico com cores, ângulos e posições personalizados. Copie CSS pronto para usar.
Gradient type
135°
Color stops
#667eea0%
#764ba2100%
Presets
CSS Output
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Como Usar Gerador de Gradiente CSS
- 1Escolha o tipo de gradiente: linear, radial ou cônico.
- 2Adicione pontos de cor e defina suas posições.
- 3Ajuste o ângulo ou direção para gradientes lineares.
- 4Copie o CSS gerado para usar em seu projeto.
ZenovayAnalytics
Saiba o que seus visitantes realmente fazem.
- Acompanhamento de visitantes em tempo real
- Privacidade em primeiro lugar, sem banner de cookies
- Configurado em dois minutos
Ferramentas Relacionadas
Gerador de Gradientes CSS
Crie belos gradientes CSS com um editor visual. Gradientes lineares, radiais e cônicos.Gerador de CSS Box Shadow
Projete sombras CSS box-shadow com controles visuais. Ajuste o deslocamento, desfoque, espalhamento e cor.Gerador de CSS Border Radius
Crie valores personalizados de border radius com controles visuais. Vincule ou desvinque os cantos para ajuste rápido.Área de Testes CSS Flexbox
Aprenda e gere layouts CSS Flexbox visualmente. Ajuste direção, alinhamento, quebra de linha e espaçamento em tempo real.Perguntas Frequentes
O que é um gradiente CSS?▾
Um gradiente CSS é uma transição suave entre duas ou mais cores, criada sem arquivos de imagem. Tipos: linear-gradient() — cores ao longo de uma linha reta em um ângulo especificado; radial-gradient() — cores irradiando para fora de um ponto central; conic-gradient() — cores varridas ao redor de um ponto central (como um gráfico de pizza, suportado em todos os navegadores modernos); variantes repeating-* repetem o padrão. Gradientes são valores para a propriedade background-image, não background-color.
Como funciona o linear-gradient?▾
Sintaxe: linear-gradient(direção, color-stop1, color-stop2, ...). Direção: ângulo (0deg = baixo para cima, 90deg = esquerda para direita) ou palavra-chave (to right, to bottom left). Color stops: cores com posições opcionais. Exemplo: linear-gradient(135deg, #ff6b6b 0%, #ffd93d 50%, #6bcb77 100%). Sem posições, os stops são distribuídos uniformemente. Com posições: linear-gradient(to right, red 20%, blue 80%) significa 20% vermelho, depois transição, depois 80% azul até o fim.
O que são dicas de cor em gradientes?▾
Dicas de cor (também chamadas de dicas de transição ou pontos médios) controlam onde ocorre o ponto médio da transição do gradiente. Normalmente, as transições são lineares entre stops — o ponto médio fica exatamente entre duas cores a 50%. Uma dica move esse ponto médio. Exemplo: linear-gradient(to right, red, 25%, blue) — o ponto médio da transição vermelho-para-azul está em 25% (mais próximo do lado vermelho), fazendo parecer mais azul no geral. Suportado em todos os navegadores modernos.
Qual é a diferença entre gradientes radial e conic?▾
radial-gradient() irradia de um ponto central para fora em formas elípticas ou circulares. Sintaxe: radial-gradient(shape size at position, colors). Exemplo: radial-gradient(circle at center, white, black). conic-gradient() varre cores ao redor de um ponto central como uma roda de cores ou gráfico de pizza. Sintaxe: conic-gradient(from angle at position, colors). Exemplo: conic-gradient(red, yellow, green, blue, red). Ambos suportam color stops com posições em porcentagem.
Como uso gradientes no Tailwind CSS?▾
O Tailwind suporta gradientes lineares via: bg-gradient-to-{direction} (ex.: bg-gradient-to-r) + from-{color} + via-{color} (opcional) + to-{color}. Exemplo: class="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500". Para gradientes radiais/cônicos ou gradientes personalizados complexos, use a sintaxe [arbitrary value]: bg-[radial-gradient(circle,_#ff6b6b,_#4158d0)] ou adicione um gradiente personalizado ao backgroundImage no tailwind.config.js. O Tailwind v3.3+ melhorou o suporte a gradientes arbitrários.