Gerador de Gradiente CSS
O que esta ferramenta faz
Escolha um tipo de gradiente (Linear, Radial ou Cônico), ajuste o ângulo ou a forma, adicione paradas de cor e arraste suas posições e copie o CSS pronto para usar. A prévia atualiza em tempo real enquanto você edita. Clique em um swatch predefinido para aplicá-lo como ponto de partida.
Como usar
- Escolha um tipo: Linear, Radial ou Cônico.
- Ajuste o ângulo (Linear/Cônico) ou a forma (Radial).
- Clique em um swatch para mudar a cor ou digite um valor HEX.
- Arraste os controles de posição para distribuir as cores.
- Clique em Copiar para copiar o código CSS.
Perguntas Frequentes
O que é um gradiente linear?
Um gradiente linear faz a transição de cores ao longo de uma linha reta em determinado ângulo. Use `linear-gradient(135deg, #color1, #color2)` no CSS. O ângulo define a direção: 0° de baixo para cima, 90° da esquerda para a direita, 135° na diagonal.
O que é um gradiente radial?
Um gradiente radial espalha as cores a partir de um ponto central, em forma de círculo ou elipse. Use `radial-gradient(circle, #color1, #color2)` no CSS. É comum em efeitos de holofote e brilho.
O que é um gradiente cônico?
Um gradiente cônico faz a transição de cores ao redor de um ponto central, como uma roda de cores. Use `conic-gradient(from 0deg, #color1, #color2)` no CSS. É útil para gráficos de pizza e efeitos de carregamento.
Quantas paradas de cor posso adicionar?
O gerador aceita até 8 paradas de cor. Cada parada tem uma cor e uma posição (0–100%). Arraste o controle de posição para ajustar onde cada cor começa no gradiente.
Gradientes CSS funcionam em todos os navegadores?
Sim. Gradientes lineares, radiais e cônicos funcionam em todos os navegadores modernos. O gerador também inclui um background-color de reserva (a primeira cor) para navegadores muito antigos sem suporte a gradientes.