Gerador de Gradiente CSS – Gradientes Lineares, Radiais e Cônicos

Como usar: Gerador de Gradiente CSS

1Escolha um tipo de gradiente — Linear, Radial ou Cônico — ou comece a partir de uma predefinição.

2Escolha as cores para os pontos e arraste os controles deslizantes para definir a posição de cada cor.

3Defina o ângulo (ou a forma para gradientes radiais) e adicione até oito pontos de cor.

4Copie o CSS e cole na sua folha de estilos.

Crie gradientes CSS visualmente

Gradientes adicionam profundidade e cor a botões, seções hero, cards e fundos sem precisar de nenhum arquivo de imagem. Escrevê-los à mão, no entanto, significa adivinhar ângulos e porcentagens e recarregar a página várias vezes. Este gerador de gradiente CSS permite que você crie o gradiente visualmente com uma pré-visualização em tempo real e fornece um código CSS limpo, pronto para copiar, que funciona em todos os navegadores modernos.

Recursos

Três tipos de gradiente: linear, radial (círculo ou elipse) e cônico.
Até oito pontos de cor com posições arrastáveis.
Controle deslizante de ângulo para gradientes lineares e cônicos.
Predefinições e um botão aleatório para inspiração rápida.
Cor sólida de fallback incluída no CSS.
Copie o código com um clique.

Como usar o CSS

Cole o código na regra do elemento que você deseja estilizar:

.hero {
  background: #0ea5e9;
  background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
}

Gradientes são imagens no CSS, então você também pode usá-los em background-image, sobrepor vários gradientes separados por vírgulas ou combiná-los com uma foto: background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(photo.jpg); escurece uma imagem para que o texto branco por cima continue legível.

Dicas de design

Mantenha a sutileza. Dois tons próximos (azul para roxo, laranja para rosa) criam um efeito mais suave e moderno do que cores opostas.
Verifique o contraste. Se o texto ficar sobre o gradiente, garanta que ele seja legível em ambas as pontas — teste as cores com o Conversor de Cores, que mostra as taxas de contraste.
Extraia cores de uma imagem da marca com o Seletor de Cores de Imagem.
Adicione profundidade a cards e botões com o Gerador de Box Shadow.

Perguntas frequentes

Por que há duas linhas de background no CSS?

A primeira linha define uma cor sólida de fallback para os raros navegadores ou clientes de e-mail que não suportam gradientes. Navegadores compatíveis usam a segunda linha, que substitui a primeira.

O que os ângulos significam em um gradiente linear?

0° vai de baixo para cima, 90° da esquerda para a direita, 180° de cima para baixo e 270° da direita para a esquerda. Ângulos intermediários são diagonais — 135° vai do canto superior esquerdo para o inferior direito.

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

Um gradiente linear muda de cor ao longo de uma linha reta. Um gradiente radial se espalha do centro para fora em um círculo ou elipse. Um gradiente cônico gira em torno do centro como um círculo cromático ou gráfico de pizza.

Preciso usar prefixos como -webkit-?

Não. Gradientes lineares e radiais funcionam sem prefixo em todos os navegadores atuais, e os gradientes cônicos são suportados em todos os navegadores modernos lançados desde 2020.

Como crio uma divisão nítida em vez de uma transição suave?

Adicione duas paradas de cor na mesma posição com cores diferentes. Por exemplo, vermelho em 50% e azul em 50% cria uma divisão nítida no meio.