Gerador de gradiente

Um gerador de gradiente permite montar um gradiente CSS visualmente, em vez de chutar ângulos e posições de parada. Escolha entre linear, radial ou cônico, adicione ou remova pontos de cor, e ajuste a cor e a posição de cada ponto enquanto uma grande caixa de pré-visualização atualiza na hora.

Qual é a diferença entre os três tipos de gradiente?

Um gradiente linear mistura cores ao longo de uma linha reta, e você controla a direção com um controle deslizante de ângulo: 90 graus vai da esquerda para a direita, 180 vai de cima para baixo. Um gradiente radial se espalha a partir de um ponto central, e aqui você escolhe entre círculo (espalha igual em todas as direções) ou elipse (esticada para acompanhar o formato da caixa). Um gradiente cônico gira as cores ao redor de um ponto central, como uma roda de cores ou um gráfico de pizza, e também usa um ângulo para definir onde a rotação começa. Cada tipo aceita qualquer número de pontos de cor, e cada ponto tem uma cor e uma posição de 0 a 100%, então dá para agrupar várias cores bem próximas ou espalhá-las de forma uniforme.

Dá para partir de um visual pronto em vez de montar do zero?

Sim. A ferramenta vem com um pequeno conjunto de predefinições, como um gradiente linear “Sunset” de duas cores quentes, uma mistura radial “Deep Space” e um gradiente cônico “Rainbow Wheel” com todas as cores do arco-íris. Escolher uma delas carrega o resultado no editor, e daí é só ajustar cores, pontos ou ângulo em vez de começar do zero. Seja qual for o resultado, a linha de saída é o CSS exato que você escreveria à mão, como linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%), pronto para colar em uma folha de estilos.

Alguma coisa que eu desenho é enviada para algum lugar?

Não. Montar e pré-visualizar o gradiente acontece inteiramente no seu navegador, então nada do que você projeta sai da sua máquina. Isso torna seguro prototipar o gradiente de marca de um cliente ou o fundo de um produto interno antes de ele ir ao ar.

Use para conseguir a linha background: linear-gradient(...) de uma seção hero, um brilho radial atrás de um card, ou um gradiente cônico para um anel de progresso ou roda de cores. Veja a referência de gradient do MDN para a sintaxe completa de linear-gradient(), radial-gradient() e conic-gradient().