Softonic

Gerador de Gradientes CSS

Etapa 1 / 2
Próximo

Um gradiente pode dar a botões, cards, seções hero e selos um acabamento caprichado sem precisar de nenhuma imagem. Este gerador escreve o CSS para você: escolha um gradiente linear ou radial, selecione duas cores, ajuste o ângulo quando necessário e copie a declaração background resultante direto para a sua folha de estilos.

Como criar um gradiente

  1. 1

    Escolha o tipo de gradiente

    Linear para uma transição reta ao longo de um ângulo, ou radial para espalhar as cores para fora a partir de um ponto central.

  2. 2

    Escolha duas cores

    Digite duas cores hexadecimais (por exemplo #2563eb e #16a34a) nos dois campos de cor.

  3. 3

    Ajuste o ângulo (apenas linear)

    O ângulo em graus: 0deg aponta para cima, 90deg para a direita, 180deg para baixo. Os gradientes radiais ignoram o ângulo.

  4. 4

    Gere o CSS

    A ferramenta monta a declaração `background:` com os seus valores.

  5. 5

    Copie o código

    Copie a linha da declaração e cole na sua folha de estilos, dentro da regra do elemento que você quer estilizar.

Gradientes lineares

background: linear-gradient(135deg, #2563eb, #16a34a);

O ângulo gira no sentido horário a partir do topo: 0deg = cima, 90deg = direita, 180deg = baixo, 270deg = esquerda. Você também pode escrever direções nomeadas manualmente: to right equivale a 90deg e to bottom left a 135deg.

Gradientes radiais

background: radial-gradient(circle, #2563eb, #16a34a);

As cores se espalham do centro do elemento para fora. Os gradientes radiais não usam ângulo; adicione palavras-chave de posição ou tamanho manualmente (at 30% 40%, ellipse) quando precisar de mais controle.

Paradas de cor

Os gradientes CSS aceitam mais de duas cores, e cada parada pode ter uma posição:

background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);

Duas paradas na mesma posição criam uma parada dura: a cor muda na hora em vez de se misturar. Útil para fundos divididos.

Dicas

  • Um gradiente de vermelho para azul passa por um ponto médio acinzentado na interpolação sRGB padrão. Interpolar em oklch mantém a mistura colorida: linear-gradient(in oklch, red, blue), suportado pelos navegadores modernos.
  • transparent não é incolor: em sRGB, ele é rgba(0,0,0,0), então um esmaecimento para transparente passa pelo cinza escuro. Use rgba(color, 0) no lugar.
  • Os gradientes são renderizados na GPU nos navegadores modernos, então custam quase nada em qualquer tamanho. Animar entre gradientes não é suportado e a troca é abrupta; anime a opacidade de uma camada extra no lugar.
  • Preenchimento de texto: combine a declaração com background-clip: text; color: transparent; para preencher texto com um gradiente. Para bordas, border-image: linear-gradient(...) 1; funciona nos navegadores modernos.

Perguntas frequentes

Linear para misturas direcionais, como um botão ou uma hero que flui de cima para baixo ou de uma ponta à outra. Radial para efeitos de holofote e brilho, em que as cores se espalham para fora a partir de um ponto central.

O ângulo define a direção da transição nos gradientes lineares: 0deg aponta para cima, 90deg para a direita e assim por diante no sentido horário. Os gradientes radiais ignoram o ângulo.

A interpolação sRGB padrão calcula a média dos componentes de cor, o que produz um ponto médio dessaturado. Interpole em oklch (linear-gradient(in oklch, red, blue)) para manter a mistura colorida no meio.

O CSS não consegue interpolar entre dois valores de background-image, a troca é abrupta. Soluções comuns: animar a opacidade de um gradiente sobreposto ou deslocar background-position em um gradiente fixo maior.

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.

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 Papel de Parede em Gradiente

Gere papéis de parede em gradiente borrados de três cores para laptop, telefone ou fundos do Zoom. Randomize ou defina o ângulo e o desfoque manualmente.

Gerador de Cores Análogas

Crie uma paleta análoga de cinco cores a partir de qualquer cor base, com o trio clássico, dois tons externos e valores hex, RGB e HSL.

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.

Ferramenta disponível em outros idiomas