Qual a diferença entre linear e radial?

Gradientes lineares fazem transição em linha reta em um ângulo especificado. Gradientes radiais fazem transição para fora a partir de um ponto central em padrão circular ou elíptico.

Posso usar mais de 2 cores?

Esta ferramenta suporta gradientes de 2 cores. Para gradientes com múltiplas paradas, use o CSS gerado como ponto de partida e adicione paradas de cor manualmente.

Gradientes CSS funcionam em todos os navegadores?

Sim. Gradientes CSS têm excelente suporte em todos os navegadores modernos incluindo Chrome, Firefox, Safari e Edge.

Ferramenta de Design

Gerador de Gradientes CSS

Name: AdaptlyPost
Author: AdaptlyPost

Crie gradientes CSS bonitos visualmente. Escolha cores, ajuste o ângulo, selecione linear ou radial e copie o CSS gerado. Inclui gradientes predefinidos para inspiração rápida.

100% gratuito — nenhuma conta necessária

Tipo

Cor 1

Cor 2

Ângulo: 135°

Pré-visualização

CSS Gerado

background: linear-gradient(135deg, #6366f1, #ec4899);

Predefinições

Gradientes Incríveis em Segundos

Construtor visual de gradientes com pré-visualização ao vivo

Linear e Radial

Alterne entre tipos de gradiente linear e radial com ângulo ajustável.

6 Gradientes Predefinidos

Comece com predefinições bonitas como Sunset, Ocean, Forest, Lavender, Cherry e Midnight.

Aleatório

Gere combinações aleatórias de gradientes para inspiração.

Copiar CSS

Copie com um clique a propriedade CSS background gerada.

Perguntas Frequentes

Ferramentas de Design

Crie Visuais com Sua Marca

Use gradientes personalizados nos seus gráficos de redes sociais com o AdaptlyPost.