Gerador de Gradiente CSS

O gerador de gradiente CSS cria degradês de cores com pré-visualização ao vivo e entrega o código pronto para colar no seu site. Escolha duas cores, o tipo (linear ou radial) e o ângulo, e copie o CSS em um clique. Grátis e no navegador.

Como criar um gradiente

1. Escolha a cor inicial e a cor final.
2. Selecione o tipo: linear (em linha reta) ou radial (do centro para fora).
3. Ajuste o ângulo do gradiente linear arrastando o controle.
4. Copie o código e cole na propriedade background do seu CSS.

Onde usar

Gradientes deixam fundos de seções, botões, cards e cabeçalhos muito mais modernos. O código gerado usa linear-gradient ou radial-gradient, funções nativas do CSS suportadas por todos os navegadores atuais. Quer ajustar as cores com precisão? Use o conversor de cores ou o conversor HEX / RGB / HSL.

Perguntas frequentes

Como uso o gradiente no meu site?

Copie o código gerado e cole na propriedade background (ou background-image) do seu CSS. Ex.: background: linear-gradient(90deg, #ff5f6d, #4b6cb7);

Qual a diferença entre gradiente linear e radial?

O linear faz a transição de cor em linha reta, controlada por um ângulo; o radial parte de um ponto central para fora, em formato circular.

Funciona em todos os navegadores?

Sim. linear-gradient e radial-gradient são suportados por todos os navegadores modernos, sem necessidade de prefixos.

Posso usar mais de duas cores?

Esta ferramenta gera gradientes de duas cores, que cobrem a maioria dos casos. Para mais cores, é só acrescentar paradas (color-stops) ao código copiado.