O que ela faz
Ideal para backgrounds de sites, botões, cards e elementos de design.
Exemplo: gradiente linear de 135° com verde (#0f766e) para âmbar (#f59e0b).
Design
Gerador de gradiente CSS
Crie gradientes CSS lineares e radiais, ajuste cores, posições e ângulo. Copie o código CSS pronto.
Como usar
- Adicione cores ao gradiente.
- Ajuste posições das cores.
- Escolha tipo linear ou radial.
- Copie o código CSS.
Configuração
Corres do gradiente
%
%
Preview
Size:
Código CSS
background: linear-gradient(135deg, #0f766e 0%, #f59e0b 100%);
Presets populares
Ferramentas relacionadas
Ferramentas relacionadas
Continue com ferramentas e guias que ajudam a concluir a próxima etapa.
Ferramenta
Estilizador de QR Code
Personalize QR Codes com cores, logo, cantos arredondados, margem e fundo transparente. Baixe em PNG ou SVG.
FerramentaQR Code colorido
Crie QR Code colorido com estilos de pontos, cantos, margem e fundo transparente. Baixe em PNG ou SVG.
FerramentaGerador de Paleta de Cores Online
Crie paletas de cores com combinações complementares, análogas, triádicas e monocromáticas. Copie HEX, RGB, HSL e variáveis CSS.
Como funciona
- Gera código CSS com prefixos quando necessário.
- Permite até 8 cores por gradiente.
- Oferece presets populares para começar rápido.
Limitações
- Não gera gradientes cônicos nesta versão.
- Fallback de cor sólida não é adicionado automaticamente.
- Sempre teste em múltiplos navegadores.
Quando usar
- Backgrounds de landing pages.
- Botões com efeito degradê.
- Cards e elementos de UI.
- Materiais para impressão.
Perguntas frequentes
O gradiente funciona em todos os navegadores?
Suporta navegadores modernos. Para IE11, use fallback com cor sólida.
Posso usar mais de duas cores?
Sim. Você pode adicionar até 8 cores por gradiente.
Como ajustar o ângulo?
Use o controle deslizante ou digite um valor de 0 a 360 graus.
Posso exportar como imagem?
Não diretamente. Use a função de screenshot do navegador se precisar da imagem.