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

Referência da Tabela ASCII

Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.

Referência de Caracteres HTML

Lista pesquisável de entidades HTML, seus códigos nomeados e numéricos, e uma cópia com um clique para caracteres e símbolos especiais.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Referência de atalhos de teclado

Pesquise atalhos padrão documentados do VS Code, Chrome e Bash com GNU Readline no macOS, Windows e Linux.

Gerador de EditorConfig

Monte um .editorconfig com as suas regras de indentação, fim de linha e charset e acrescente a seção correta para cada linguagem do seu repositório: Python, Go, YAML, Makefile e mais.

Validador de Email

Valide um endereço de email: verificação de sintaxe RFC 5322, consulta de registro MX em tempo real, além de detalhes de parte local, domínio e comprimento. Nenhum email é enviado.

Ferramenta disponível em outros idiomas