Gerador Gradiente CSS Grátis: Criar Degradês Lineares Radiais

A Selecione tipo, cores, ângulo e copie CSS.

A Linear e radial. Múltiplas cores.

A Sim, adicione paradas de cor.

A Gradientes lineares fluem em linha reta, seja horizontal, vertical ou diagonalmente. Você controla a direção com o controle deslizante de ângulo, como defini-lo para 90 graus para um desvanecimento vertical. Gradientes radiais se expandem para fora de um ponto central, criando um efeito circular ou elíptico. Você não pode controlar diretamente a forma além do circular com esta ferramenta, mas pode escolher onde o centro está.

A A ferramenta gera CSS padrão que funciona no Chrome, Firefox, Safari e Edge. Internet Explorer 9 e anteriores não exibem gradientes, mas isso representa menos de 1% do tráfego global hoje. Para navegadores antigos, adicione uma cor de fundo sólida como fallback no seu CSS antes da propriedade de gradiente. Assim, os usuários veem uma cor chapada se os gradientes não forem suportados. Teste rápido: cole o código nas ferramentas do desenvolvedor de qualquer navegador moderno para verificar.

A As faixas aparecem quando as transições de cor mostram listras visíveis em vez de uma mescla suave. Isso geralmente acontece quando o gradiente cobre muitos pixels sem paradas de cor suficientes. Para uma seção hero de largura total, adicione uma terceira parada de cor no meio das suas duas cores principais. Em fundos grandes (1920px+), defina background-attachment: fixed para reduzir o efeito. O gerador produz código limpo, mas a renderização do navegador tem limites. Dica rápida: escolha cores com brilho parecido para transições mais suaves.

A Seu gradiente respeitará as configurações de alto contraste do sistema, mas a ferramenta não as simula. Problemas de contraste surgem quando duas cores têm luminosidade parecida — como amarelo pastel ao lado de rosa claro. Verificação rápida: converta ambos os códigos hex para HSL e garanta que seus valores L difiram em pelo menos 30 pontos. Para seções hero, teste seu gradiente no modo de alto contraste do Windows ou com uma extensão como Axe. Os 12 predefinidos foram escolhidos pensando em acessibilidade, mas cores personalizadas ficam por sua conta.

A Esta versão não tem recurso de salvar. Solução prática: cole o CSS gerado num arquivo de texto, num snippet do CodePen ou no painel de snippets das ferramentas do navegador. Designers experientes mantêm um arquivo "gradients.css" no projeto com 5 a 10 favoritos. Gasta 10 segundos para configurar e nunca mais precisa recriar do zero.