Softonic

Gerador de Gradiente CSS

Etapa 1 / 3
Tipo
Próximo

Fundos de UI modernos raramente usam uma cor sólida, seções hero, botões e cartões quase todos usam um gradiente CSS. Este gerador permite que você escolha linear ou radial, adicione quantas paradas de cor quiser, defina o ângulo (para linear) ou a forma (para radial) e copie um valor limpo background: linear-gradient(…) pronto para colar em sua folha de estilo.

Como construir um gradiente CSS

  1. 1

    Escolha o tipo de gradiente

    Linear (direção por ângulo) ou radial (círculo/elipse).

  2. 2

    Defina o ângulo ou a forma

    Linear: 0–360°. Radial: círculo ou elipse.

  3. 3

    Adicione paradas de cor

    Cada parada é uma cor mais uma posição (0–100%). Gradientes com duas paradas são a base; três paradas ou mais proporcionam transições mais suaves.

  4. 4

    Copie o CSS

    A saída é um único valor da propriedade `background` que você pode colar em qualquer arquivo CSS.

Folha de dicas de sintaxe

/* Linear */
background: linear-gradient(135deg, #6366F1 0%, #EC4899 100%);

/* Radial (círculo) */
background: radial-gradient(circle at center, #6366F1 0%, #EC4899 100%);

/* Múltiplas paradas */
background: linear-gradient(90deg, #fff 0%, #f59e0b 50%, #ef4444 100%);

Ângulos que realmente correspondem à intuição

Os ângulos de gradiente CSS diferem da trigonometria: 0deg aponta para cima (norte), 90deg aponta para a direita (leste), 180deg para baixo, 270deg para a esquerda.

Direção Ângulo
De cima para baixo 180deg
De baixo para cima 0deg
Da esquerda para a direita 90deg
Do canto superior esquerdo para o canto inferior direito 135deg

Evitando tons médios embaçados

Gradientes lineares entre cores complementares (por exemplo, azul → laranja) passam por uma faixa cinza em torno de 50% onde a mistura parece “morta”. Corrija isso:

  • Adicionando uma parada média em um tom relacionado (azul → roxo → laranja).
  • Usando interpolação OKLCH (linear-gradient(in oklch, ...)) para misturas perceptivamente mais suaves, suportado em todos os navegadores modernos a partir de 2024.
  • Mudando ligeiramente um ponto final em tom para que o tom médio fique em uma família mais quente.

Dica de desempenho

Gradientes são desenhados pela GPU e geralmente são baratos. Animar um (truques com background-position, desfoque SVG) ainda pode aumentar o custo de renderização, teste em um celular intermediário antes de publicar.

Perguntas frequentes

Gradientes CSS medem o ângulo no sentido horário a partir do topo, enquanto a matemática padrão mede no sentido anti-horário a partir da direita. 90deg em CSS aponta para a direita; na trigonometria isso seria 0°.

A especificação permite qualquer número. Praticamente, mais de 4–5 paradas tende a parecer um arco-íris; duas ou três paradas bem escolhidas quase sempre parecem mais limpas.

Sim, cole como um valor arbitrário: class="bg-[linear-gradient(135deg,#6366F1,#EC4899)]". Para gradientes reutilizáveis, defina uma utilidade personalizada em sua configuração do Tailwind.

O editor padrão envia as configurações do gradiente ao servidor para renderizar a prévia. No fluxo guiado, tipo, ângulo, forma e paradas de cor também aparecem na URL. Não insira informações sensíveis; a ferramenta não salva um projeto de gradiente reutilizável.

Ferramentas relacionadas

Simplificador de Álgebra Booleana

Simplifique expressões booleanas usando mapas de Karnaugh e o algoritmo de Quine-McCluskey. Mostra cada passo de minimização e uma forma final SOP/POS.

Gerador de Paletas de Cores

Gere paletas monocromáticas, análogas, complementares, triádicas ou tetrádicas a partir de uma cor base HEX e exporte variáveis CSS prontas para copiar.

Conversor de ASCII para Hex

Converta texto ASCII em valores de byte hexadecimal. A saída usa dois dígitos hexadecimais por caractere, prontos para dumps de memória, rastreamentos de pacotes ou tabelas de firmware.

Conversor de Binário para ASCII

Cole binário (bytes separados por espaço ou um longo fluxo de bits) e obtenha o texto ASCII que ele representa. Lida com codificações de 7 bits e 8 bits.

Conversor de BBCode para HTML

Converta BBCode (marcação de fórum) para HTML limpo. Lida com tags de formatação, listas, citações, código, imagens, links e tabelas.

Formatador de JSON

Cole JSON para exibir com recuo de 2 ou 4 espaços, minificar em uma saída compacta ou verificar rapidamente a sintaxe antes de copiar o resultado.