Gerador de Gradientes CSS
Crie gradientes CSS lindos com preview em tempo real. Copie o código pronto para usar.
Preview
Código CSS
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);O que são Gradientes CSS?
Gradientes CSS são transições suaves entre duas ou mais cores, criando efeitos visuais elegantes sem a necessidade de imagens. Eles são amplamente usados em web design moderno para criar backgrounds atraentes, botões estilizados e elementos visuais impactantes.
Nosso gerador permite criar três tipos de gradientes: linear (transição em linha reta), radial (transição circular do centro para fora) e conic (transição em formato de cone, girando em torno de um ponto central).
Tipos de Gradientes CSS
Linear Gradient
Cria uma transição de cores em linha reta. Você pode controlar a direção (horizontal, vertical ou diagonal) e adicionar múltiplas cores com posições específicas.
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);Radial Gradient
Cria uma transição circular partindo do centro. Ideal para criar efeitos de spotlight, botões com brilho ou backgrounds com profundidade.
background: radial-gradient(circle, #f12711 0%, #f5af19 100%);Conic Gradient
Cria uma transição em formato de cone, girando em torno de um ponto. Perfeito para criar gráficos de pizza, efeitos de arco-íris ou designs circulares únicos.
background: conic-gradient(from 0deg, #667eea, #764ba2);Como Usar o Gerador
- Escolha o tipo: Selecione entre linear, radial ou conic gradient.
- Defina a direção: Para gradientes lineares, escolha o ângulo ou direção da transição.
- Adicione cores: Clique no + para adicionar mais cores. Use o seletor de cor e o slider de posição.
- Ajuste posições: Mova os sliders para controlar onde cada cor aparece (0-100%).
- Copie o código: Clique em "Copiar CSS" e cole diretamente no seu arquivo de estilos.
- Ou use presets: Escolha um dos gradientes populares prontos (Instagram, Sunset, Ocean, etc.).