Gerador de Gradiente CSS
Crie gradientes CSS deslumbrantes com pré-visualização em tempo real e código para copiar e colar
Tipo de Gradiente
Pré-visualização ao Vivo
Pontos de Cor
Cor 1
0%
Cor 2
100%
Arraste cores ou ajuste posições para criar o seu gradiente perfeito
CSS Gerado
background: linear-gradient(to right, #667eea 0%, #764ba2 100%);.gradient {
background: linear-gradient(to right, #667eea 0%, #764ba2 100%);
}Gradientes Predefinidos
O Que é um Gradiente CSS?
Gradientes CSS são transições suaves entre duas ou mais cores. Podem ser usados como fundos, sobreposições ou elementos decorativos. O nosso gerador de gradientes facilita a criação de gradientes lineares e radiais com um editor visual. Basta escolher cores, ajustar posições e copiar o código CSS gerado diretamente para a sua folha de estilo.
Tipos de Gradientes CSS
- Gradiente Linear: Cria um gradiente ao longo de uma linha reta em qualquer direção (horizontal, vertical ou diagonal)
- Gradiente Radial: Cria um gradiente irradiando de um ponto central numa forma circular ou elíptica
Como Usar
- Escolha entre tipo de gradiente linear ou radial
- Selecione direção (linear) ou forma (radial)
- Adicione, remova ou ajuste pontos de cor
- Ajuste finamente a posição de cada cor ao longo do gradiente
- Copie o código CSS gerado e cole na sua folha de estilo
Funcionalidades Principais
- Pré-visualização ao vivo: Veja o seu gradiente em tempo real enquanto edita
- Múltiplos pontos de cor: Adicione até 10 cores num único gradiente
- Gradientes predefinidos: Comece com belas combinações de gradientes pré-feitas
- Aleatorizar cores: Gere combinações de cores aleatórias para inspiração
- Copiar código CSS: Cópia com um clique do código de gradiente gerado
- Linear e radial: Suporte para todos os tipos de gradientes CSS