Pular para o conteúdo

Gerador de gradientes CSS

Crie um gradiente CSS linear ou radial com até cinco paradas de cor e copie a declaração de fundo pronta para colar.

Tipo
°
Paradas de cor

De dois a cinco pontos. A posição é a porcentagem ao longo do gradiente.

Gradiente gerado

background: linear-gradient(135deg, #14B8A6 0%, #6366F1 100%);

Como funciona

Um gerador de gradientes CSS cria visualmente um valor linear-gradient() ou radial-gradient(), para que você possa escolher cores e posições com uma visualização em tempo real em vez de tentar adivinhar a sintaxe manualmente.

  1. Escolha linear ou radial

    O linear segue um ângulo; o radial se espalha do centro para fora.

  2. Defina o ângulo e os pontos

    Arraste o controle deslizante de ângulo e defina a cor e a posição de cada ponto de 0 a 100%.

  3. Copie o CSS

    A declaração de fundo é atualizada em tempo real e pode ser copiada com um clique.

Como usar o CSS gerado

Cole a linha copiada na propriedade background ou background-image de qualquer elemento de bloco:

.hero { background: linear-gradient(to bottom, #0f172a 0%, #1e3a5f 60%, #0f172a 100%); }

Gradientes não podem ser aplicados diretamente a color ou border-color. Para um gradiente de texto, aplique o gradiente como fundo no elemento de texto e adicione background-clip: text e color: transparent.

Linear vs. radial

  • Linear: as paradas se deslocam ao longo de uma linha reta no ângulo escolhido. 0deg aponta para cima, 90deg para a direita, 180deg para baixo e 270deg para a esquerda.
  • Radial: as paradas se irradiam do centro em um círculo. Esta ferramenta sempre centraliza o gradiente radial; para um gradiente radial descentralizado ou elíptico, edite o valor gerado manualmente e adicione uma palavra-chave de posição ou forma.

Suporte do navegador

Tanto linear-gradient() quanto radial-gradient() funcionam em todos os navegadores atuais sem prefixos de fornecedor. Formas mais antigas com prefixo, como -webkit-linear-gradient(), não são mais necessárias.

Não coberto por esta ferramenta

Gradientes cônicos (conic-gradient()) e múltiplos gradientes em camadas em um único elemento não são gerados aqui. Ambos são CSS válidos que você pode adicionar manualmente após ter um gradiente base para começar.

Perguntas frequentes

Como gero um gradiente CSS com várias paradas de cor?

Adicione paradas de cor com o botão Adicionar parada de cor e defina a cor hexadecimal e a posição percentual de cada uma. A prévia e a linha CSS abaixo dela são atualizadas enquanto você digita. Clique em Copiar CSS para obter a declaração completa, por exemplo: background: linear-gradient(135deg, #14B8A6 0%, #6366F1 100%);

Em qual propriedade CSS devo colar um gradiente gerado?

Use a propriedade background ou background-image em qualquer elemento de bloco. Gradientes não podem ser aplicados diretamente a color ou border-color; para um gradiente de texto, combine background-clip: text com color: transparent no elemento de texto.

Como criar um gradiente diagonal em CSS?

Defina o ângulo com um valor entre os eixos, como 45 para superior esquerdo a inferior direito ou 135 para superior direito a inferior esquerdo. 0 aponta para cima, 90 para a direita, 180 para baixo e 270 para a esquerda.

Posso adicionar mais de duas paradas de cor a um gradiente CSS?

Sim, esta ferramenta aceita até cinco etapas. Clique em Adicionar parada de cor para inserir uma no ponto médio entre as duas últimas e ajuste sua cor e posição. Cada etapa tem seu próprio botão de remoção quando há mais de duas.

Esta ferramenta suporta gradientes radiais?

Sim. Alterne o Tipo para Radial para gerar radial-gradient() em vez de linear-gradient(). O gradiente radial é sempre centralizado; não há ângulo para definir, pois ele se espalha uniformemente em todas as direções. Gradientes cônicos não são suportados e precisam ser escritos manualmente.