Pular para o conteúdo
nearnull

Gerador de Gradiente CSS

Crie gradientes CSS lineares e radiais com pré-visualização ao vivo e copie o código. Funciona totalmente no seu navegador: nada é enviado a nenhum servidor.

Opções
Tipo
CSS 
background: #2563eb;
background: linear-gradient(90deg, #2563eb 0%, #db2777 100%);

O que é um gradiente CSS?

Um gradiente CSS é uma imagem que o navegador desenha a partir de uma lista de cores, misturando-as suavemente, então não precisa baixar nenhum arquivo e fica nítido em qualquer tamanho. Um gradiente linear mistura ao longo de uma linha reta no ângulo que você escolher, e um radial se espalha a partir do centro como um círculo ou uma elipse. Cada cor é um stop com uma posição no percurso. Este gerador permite escolher o tipo, o ângulo e até seis stops de cor, mostra uma pré-visualização ao vivo e escreve o CSS, com uma cor sólida de fallback primeiro.

Exemplos

O mesmo gradiente escrito para destinos diferentes:

CSS
background: #2563eb;
background: linear-gradient(90deg, #2563eb 0%, #db2777 100%);
Tailwind
<div class="bg-gradient-to-r from-blue-600 to-pink-600"></div>
JavaScript
element.style.background =
  "radial-gradient(circle, #2563eb 0%, #db2777 100%)";
Canvas
const g = ctx.createLinearGradient(0, 0, width, 0);
g.addColorStop(0, "#2563eb");
g.addColorStop(1, "#db2777");
ctx.fillStyle = g;
SVG
<linearGradient id="g">
  <stop offset="0%" stop-color="#2563eb" />
  <stop offset="100%" stop-color="#db2777" />
</linearGradient>

Casos de uso

Seções hero e banners

Dê profundidade ao header de uma landing page com um gradiente de duas ou três cores em vez de uma imagem de fundo pesada.

Botões e badges

Um gradiente sutil entre dois tons próximos faz um call to action se destacar sem mudar de cor.

Overlays sobre imagens

Coloque um gradiente de transparente a escuro sobre uma foto para que o texto branco por cima continue legível.

Placeholders e avatares

Gere fundos coloridos para estados vazios, cards carregando ou avatares padrão, sem arquivos de imagem.

Perguntas frequentes

Por que há uma linha de background liso antes do gradiente?
É um fallback. Um navegador que não entende o gradiente ignora essa declaração e fica com a cor sólida da linha anterior, assim o elemento nunca fica sem fundo.
Como funciona o ângulo?
0deg aponta para cima, 90deg para a direita, 180deg para baixo e 270deg para a esquerda. A linha do gradiente segue essa direção, então 90deg começa com a primeira cor à esquerda e termina com a última à direita.
Posso usar cores transparentes?
Sim. Digite uma cor com alpha, como #00000080 ou rgba(0, 0, 0, 0.5), em qualquer stop. É assim que se fazem overlays sobre imagens e efeitos de esmaecimento.
Por que não há gradientes cônicos?
conic-gradient() não é suportado em todos os navegadores que este site atende (o Firefox o adicionou na versão 83), então a ferramenta fica com gradientes lineares e radiais, que funcionam em todos.
Meus dados são enviados a algum servidor?
Não. A pré-visualização e o CSS são gerados no seu navegador com JavaScript puro. Nada é transmitido ou armazenado.

Ferramentas relacionadas

Conversor de Cores (HEX, RGB, HSL, CMYK)Verificador de Contraste de Cores (WCAG AA / AAA)Gerador de Tonalidades (Tints e Shades)Gerador de Paleta de Cores (Harmonias)Seletor de Cor de ImagemSimulador de Daltonismo