InícioFerramentas de DesignGerador de Gradientes

Gerador de Gradientes

O gerador de gradiente CSS cria gradientes lineares, radiais e cônicos a partir de duas ou três cores, com prévia ao vivo e CSS de background pronto para copiar.

Sobre esta ferramenta

O gerador de gradiente CSS cria gradientes lineares, radiais e cônicos a partir de duas ou três cores, com prévia ao vivo e CSS de background pronto para copiar.

Como usar

  1. Escolha o tipo de gradiente: linear, radial ou cônico.
  2. Defina o ângulo no controle deslizante (0–360°).
  3. Escolha duas cores, ou marque Usar 3 cores para adicionar uma terceira.
  4. Clique em Copiar CSS e cole a regra background na sua folha de estilos.

Bom saber

  • linear-gradient() mistura as cores ao longo de uma linha reta definida por um ângulo, em que 90deg vai da esquerda para a direita.
  • radial-gradient(circle, …) espalha as cores do centro para fora.
  • conic-gradient(from <angle>, …) gira as cores em torno de um ponto central, o que é útil para gráficos de pizza e círculos cromáticos.
  • Gradientes CSS são imagens renderizadas pelo navegador, então se ajustam a qualquer tamanho sem aumentar o peso dos arquivos.
  • As três funções de gradiente são suportadas por todos os principais navegadores atuais.

Funciona inteiramente no seu navegador — nada do que você digita é enviado ou armazenado.

Perguntas frequentes

Como faço um gradiente em CSS?

Use uma função de gradiente como fundo, por exemplo background: linear-gradient(135deg, #1db954, #0a1628). Esta ferramenta escreve essa linha para você com as cores e o ângulo escolhidos.

Qual a diferença entre gradientes lineares, radiais e cônicos?

Gradientes lineares mudam de cor ao longo de uma linha, os radiais se espalham a partir de um ponto central e os cônicos giram em torno de um centro, como os ponteiros de um relógio.

Um gradiente pode ter mais de duas cores?

Sim. Gradientes CSS aceitam qualquer número de paradas de cor. Este gerador suporta duas ou três cores; você pode adicionar mais paradas manualmente no CSS copiado.

Gradientes CSS deixam o site mais lento?

Não de forma perceptível. Eles são desenhados pelo navegador e não exigem download de imagem, então costumam ser mais leves que arquivos de imagem com gradiente.