ZenovayTools

Gerador de Gradientes CSS

Crie belos gradientes CSS com um editor visual. Gradientes lineares, radiais e cônicos.

135deg
0%
100%
CSS
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

Como Usar Gerador de Gradientes CSS

  1. 1Escolha o tipo de gradiente: linear, radial ou cônico.
  2. 2Adicione pontos de cor e ajuste suas posições na barra de gradiente.
  3. 3Defina o ângulo ou direção do gradiente.
  4. 4Visualize o gradiente em tempo real na tela.
  5. 5Copie o código CSS gerado com um clique.
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
Conheça o Zenovay

Ferramentas Relacionadas

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.
Gerador de CSS Grid
Construa layouts CSS Grid com um editor visual. Defina colunas, linhas, espaçamentos e estenda células nas áreas.

Perguntas Frequentes

Quais tipos de gradiente são suportados?▾
A ferramenta suporta gradientes lineares (com ângulo ajustável) e gradientes radiais (círculo). Você pode adicionar múltiplos color stops para criar gradientes complexos.
Como adiciono mais cores?▾
Clique no botão "Adicionar Color Stop" para incluir uma nova cor. Cada stop tem um seletor de cor e um controle deslizante de posição (0–100%). Você pode adicionar até 10 color stops.
Posso copiar o código CSS?▾
Sim. O código CSS gerado é exibido abaixo da pré-visualização e pode ser copiado com um clique. Ele produz CSS padrão que funciona em todos os navegadores modernos.
Ele gera prefixos de fornecedor?▾
Não. Os navegadores modernos (Chrome, Firefox, Safari, Edge) suportam gradientes CSS sem prefixo. Prefixos de fornecedor não são mais necessários.
Posso usar essa ferramenta no meu celular?▾
Sim, o gerador de gradientes funciona em qualquer navegador mobile moderno. Ajuste cores, posições e ângulos com controles de toque e copie o CSS em qualquer dispositivo.
Isso funciona com Tailwind CSS ou outros frameworks?▾
Sim. A ferramenta gera propriedades CSS background padrão que funcionam com qualquer framework. No Tailwind, você pode usar a sintaxe de valor arbitrário como bg-[linear-gradient(...)] ou aplicar o CSS diretamente em classes personalizadas.
Qual é o número máximo de color stops?▾
Você pode adicionar até 10 color stops por gradiente. Cada stop tem cor e posição ajustáveis (0–100%), dando a você controle preciso sobre a transição do gradiente.