O gerador de gradientes CSS permite projetar gradientes lineares, radiais e cônicos em tempo real — ajuste as paradas de cor, o ângulo e as posições e depois copie o CSS pronto para usar.
Recursos
- 3 tipos de gradiente: linear (direcional), radial (do centro para fora) e cônico (rotacional — ótimo para gráficos de pizza e rodas de cores).
- Controle de ângulo: defina 0–360° para os tipos linear e cônico com um controle deslizante ou entrada numérica precisa; o botão de rotação soma 45° a cada clique.
- Paradas de cor: cada parada tem seu próprio seletor de cor e controle de posição (0–100%). Mínimo de 2 paradas — adicione quantas quiser.
- 10 predefinições selecionadas, incluindo Sunset, Ocean, Aurora e Conic Pride — clique para carregar uma predefinição como ponto de partida.
- Prévia grande ao vivo: o painel de prévia de 192 px e a barra fina de gradiente são atualizados na hora enquanto você edita.
- Cópia de CSS com um clique: obtenha o CSS completo background: gradient(...); pronto para colar em qualquer folha de estilo ou atributo style.
Como usar?
- Escolha um tipo de gradiente, defina as paradas de cor e o ângulo, ou comece de uma predefinição.
- Confira a prévia e adicione ou remova paradas de cor conforme necessário.
- Copie o CSS gerado.
