Gerador de Gradiente CSS (linear, radial, cônico)
Escolha o tipo de gradiente, defina o ângulo, adicione ou remova paradas de cor com posições. Pré-visualização ao vivo. Copie a declaração CSS de fundo com um clique.
Paradas de cor
- 0%
- 100%
Como funciona
Três tipos de gradiente em CSS
Gradiente linear: as cores fazem transição ao longo de uma linha reta em um ângulo definido. 0° aponta para cima, 90° para a direita (direção padrão de leitura), 180° para baixo. É o mais comum para fundos, botões e seções hero.
Gradiente radial: as cores fazem transição para fora a partir de um ponto central. A forma pode ser círculo (padrão aqui) ou elipse. Ideal para efeitos de holofote, elementos tipo sol ou pontos focais que chamam atenção.
Gradiente cônico: as cores giram em torno de um ponto central, como uma roda de cores. Menos comum, mas poderoso para gráficos de pizza, relógios ou spinners decorativos. Suportado nos navegadores modernos desde 2020.
Paradas de cor e o sistema de porcentagem
Cada parada de cor tem uma cor e uma posição de 0% a 100%. 0% é o início do gradiente, 100% é o fim. Duas paradas criam um gradiente suave de duas cores. Adicionar uma terceira no meio cria uma mistura de três cores ou uma faixa nítida, dependendo do posicionamento.
Para transições nítidas (sem mistura), coloque duas paradas na mesma posição com cores diferentes. Por exemplo, '#000 50%, #fff 50%' cria uma divisão nítida entre preto e branco no meio. É assim que se fazem fundos 'listrados'.
Dicas de performance e acessibilidade
Gradientes são renderizados nativamente sem requisições HTTP, ao contrário de imagens de fundo. Escalam infinitamente sem perda de qualidade. São amigáveis a animações: faça a transição da posição via background-position ou anime as paradas com propriedades personalizadas (CSS custom properties).
Acessibilidade: não coloque texto diretamente sobre um gradiente complexo se o contraste variar. Use uma camada de cor plana, garanta que a luminosidade média do gradiente contraste com o texto ou teste com o verificador de contraste. WCAG AA exige 4,5:1 para texto normal e 3:1 para texto grande.
Perguntas frequentes
›Os gradientes funcionam em navegadores antigos?
Gradientes linear e radial funcionam em todos os navegadores modernos, incluindo Edge, Firefox, Chrome e Safari (desde 2014). Gradientes cônicos precisam do Chrome 69+, Firefox 83+, Safari 12.1+; para navegadores mais antigos, use linear como fallback.
›Posso usar em React Native ou apps mobile?
Gradientes CSS web não se traduzem diretamente para React Native — use bibliotecas como `react-native-linear-gradient`. As paradas de cor se aproveitam, mas a sintaxe é diferente. iOS e Android usam APIs específicas de cada plataforma.
›Posso usar cores nomeadas?
Sim. Substitua qualquer código hex (ex.: #ff0000) pelo nome da cor CSS (red, dodgerblue etc.) na entrada de texto ao lado do seletor de cor.
›Por que meu gradiente cônico está estranho?
Gradientes cônicos giram no sentido horário a partir do ângulo definido. Ficam melhores com várias paradas cobrindo a rotação completa de 360°. Com apenas 2 paradas, geralmente parecem incompletos.
›Como criar um efeito de 'brilho' (glow)?
Use um gradiente radial com uma parada final totalmente transparente: ex., 'radial-gradient(circle, rgba(255,200,0,0.6) 0%, transparent 70%)'.
›Posso animar o gradiente?
O CSS não anima as paradas diretamente, mas você pode animar background-position para um efeito de movimento, ou usar CSS custom properties (variáveis) e atualizá-las com JavaScript.
›Por que o CSS gerado é tão longo?
Cada parada adiciona uma cor e uma posição. Gradientes com muitas paradas produzem CSS verboso. Para resultados mais simples, use 2-3 paradas.
›Os dados saem do meu navegador?
Não. Tudo é calculado localmente; nada é enviado a um servidor.
Ferramentas relacionadas
Última atualização: