Gerador de Gradiente CSS
Crie gradientes CSS impressionantes com pré-visualização em tempo real e código pronto a copiar
Tipo de Gradiente
Pré-visualização ao Vivo
Paragens de Cor
Cor 1
0%
Cor 2
100%
Arraste as 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 facilita criar gradientes linear e radial com editor visual. Basta escolher cores, ajustar posições e copiar o código CSS gerado diretamente para a sua folha de estilos.
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 que irradia a partir de um ponto central em forma circular ou elíptica
Como Usar
- Escolha entre gradiente linear ou radial
- Selecione direção (linear) ou forma (radial)
- Adicione, remova ou ajuste paragens de cor
- Ajuste a posição de cada cor ao longo do gradiente
- Copie o código CSS gerado e cole na sua folha de estilos
Funcionalidades Principais
- Pré-visualização ao vivo: Veja o gradiente em tempo real enquanto edita
- Múltiplas paragens de cor: Adicione até 10 cores num único gradiente
- Gradientes predefinidos: Comece rápido com combinações bonitas
- Aleatorizar cores: Gere combinações aleatórias para inspiração
- Copiar código CSS: Cópia com um clique do gradiente gerado
- Linear e radial: Suporte para todos os tipos de gradiente CSS