Gerador de gradiente CSS com vários pontos de cor
Monte um gradiente CSS com quantos pontos de cor precisar, escolhendo o tipo (linear ou radial) e um ângulo ajustável, com pré-visualização ao vivo. O código é calculado e exibido inteiramente no seu navegador.
Como funciona
Com mais de duas cores, um gradiente CSS fica muito mais rico visualmente: três ou mais pontos de cor permitem criar transições no estilo pôr do sol, efeito holográfico ou fundo de landing page moderna. Esta ferramenta permite adicionar, posicionar (em porcentagem) e remover livremente cada ponto de cor, com uma pré-visualização atualizada em tempo real e o código CSS exato para copiar.
Qual é a diferença entre um gradiente linear e um radial?
O gradiente linear (linear-gradient) avança em linha reta segundo um ângulo definido, enquanto o gradiente radial (radial-gradient) parte de um ponto central e se expande em círculo para fora, um efeito muito usado em halos de luz ou fundos circulares de seção.
O que significa a posição de um ponto de cor?
A posição (em porcentagem) indica em que ponto do gradiente a cor atinge sua intensidade total antes de começar a se misturar ao ponto seguinte. Aproximar dois pontos cria uma transição mais marcada entre as cores, enquanto afastá-los produz uma mistura mais gradual.
Processamento 100% local: a composição do gradiente e a geração do código acontecem diretamente no seu navegador, sem nenhum envio de dados.