🌈

gerador gradiente CSS

Crie e visualize gradientes CSS lineares e radiais. Copie código CSS pronto para usar.

Ferramentas de design Executa localmente Nenhum dado enviado
Gradiente CSS linear radial design
Tipo de gradiente
Direção
●
Paradas de cor
Saída CSS

O que é o gerador gradiente CSS?

Crie e visualize gradientes lineares e radiais em CSS. Adicione paradas de cor, escolha a direção e copie instantaneamente o código CSS pronto para usar.

Como usar o Gerador de Gradientes

  1. Escolha se deseja um gradiente linear ou radial.
  2. Adicione ou ajuste as paradas de cor até que a mistura fique certa.
  3. Ajuste com precisão o ângulo, a posição ou os valores de dispersão na pré-visualização em tempo real.
  4. Copie o CSS gerado quando estiver pronto para usá-lo no seu projeto.

Ferramentas relacionadas

🎨
gerador paleta cores
Gere paletas de cores complementares, análogas e triádicas
 🎨
seletor de cor
Converta cores entre HEX, RGB, HSL e CMYK
 ⚖️
verificador contraste WCAG
Verifique as taxas de contraste de cores WCAG AA e AAA para acessibilidade
Entenda gradientes CSS ▾
Exemplo
Entrada Linear, 90°, paradas: #6366F1 → #8B5CF6
Saída background: linear-gradient(90deg, #6366F1, #8B5CF6);
Casos de uso comuns
  • Crie gradientes de fundo do hero para páginas de marketing
  • Teste ajustes de ângulo e de paradas antes de editar arquivos CSS
  • Gere fundos refinados para botões ou cards
  • Compartilhe o CSS exato do gradiente com desenvolvedores sem conversão manual
Perguntas frequentes
Preciso de prefixos de fabricante como -webkit-linear-gradient?

Não — todos os navegadores modernos (Chrome, Firefox, Safari, Edge) suportam gradientes CSS sem prefixo. Prefixos de fabricante só são necessários para navegadores muito antigos (IE 9 e anteriores).

Posso usar paradas de cor transparentes?

Sim — use cores rgba() ou hsla() com valor alfa 0 para criar esmaecimentos até transparente. Por exemplo: rgba(99, 102, 241, 0) esmaece o índigo até ficar invisível.

Posso usar este gradiente em texto?

Sim — copie o valor do gradiente e use-o com propriedades CSS: background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent;

Qual é o número máximo de paradas de cor?

Esta ferramenta suporta até 6 paradas de cor. O próprio CSS não tem limite rígido — os navegadores suportam gradientes com dezenas de paradas, embora o desempenho possa variar.