Gerador de Gradientes CSS

Escrever linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%) à mão e recarregar a página para ver é um ciclo lento. Este gerador fecha-o: escolha linear, radial ou cônico, arraste o controle deslizante de ângulo, defina cada parada de cor com um seletor de cor nativo e uma posição percentual — e a pré-visualização em largura total redesenha a cada entrada, com a linha de fundo final sempre pronta a copiar.

Os três tipos de gradiente cobrem funções diferentes. Gradientes lineares esbatem ao longo de uma direção e transportam a maioria das hero sections e botões; gradientes radiais irradiam do centro para brilhos e vinhetas; gradientes cónicos varrem em torno do centro e alimentam gráficos de pizza e círculos cromáticos. Pode alternar entre tipos a qualquer momento — as suas paradas são transportadas, por isso comparar os três demora segundos.

Até seis paradas de cor dão-lhe espaço para designs com várias faixas, e as páginas de predefinições fornecem combinações comprovadas — um pôr do sol quente, um oceano calmo e um par pastel suave — como pontos de partida que pode ajustar, em vez de telas em branco. Note a divisão de trabalho: o gerador de paletas de cores deste site escolhe cores planas harmoniosas e o conversor de formato de cor traduz um valor entre HEX, RGB e HSL, enquanto esta ferramenta faz um trabalho diferente — transforma as cores escolhidas em código de gradiente CSS pronto.

Tudo corre localmente no seu navegador: sem carregamentos, sem conta, sem idas e voltas ao servidor, e o gerador continua a funcionar offline depois de carregado.