Gerador de gradiente CSS

Escrever linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%) manualmente e recarregar a página para ver se é um loop lento. Este gerador fecha: 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 visualização de largura total é repintada em cada entrada, com a linha de fundo finalizada sempre pronta para copiar.

Os três tipos de gradiente cobrem trabalhos diferentes. Gradientes lineares desaparecem ao longo de uma direção e carregam a maioria das seções e botões do herói; gradientes radiais irradiam do centro para brilhos e vinhetas; gradientes cônicos percorrem o centro e alimentam gráficos de pizza e rodas de cores. Você pode trocar de tipo a qualquer momento – suas paradas são transferidas, portanto, comparar os três leva segundos.

Até seis intervalos de cores oferecem espaço para designs multibanda, e as páginas predefinidas oferecem combinações comprovadas – um pôr do sol quente, um oceano calmo e um par de tons pastéis suaves – como pontos de partida que você pode ajustar em vez de telas em branco. Observe a divisão de trabalho: o gerador de paleta de cores neste site escolhe cores planas harmoniosas e o conversor de formato de cores traduz um valor entre HEX, RGB e HSL, enquanto esta ferramenta faz um trabalho diferente – transforma as cores escolhidas em código gradiente CSS pronto.

Tudo é executado localmente no seu navegador: sem upload, sem conta, sem viagens de ida e volta ao servidor, e o gerador continua funcionando offline depois de carregado.