LÂMINA · CORES
Gerador de gradiente CSS
Escolha 2 ou 3 cores, ajuste posições e ângulo, veja o degradê em tempo real e leve a declaração background: pronta pra colar no seu CSS.
CSS pronto
background: linear-gradient(135deg, #d63327 0%, #243b4a 100%);Processado no seu navegador — seus arquivos não saem do seu computador.
Como funciona
-
Escolha as cores
Comece com duas cores nos seletores e ajuste a posição de cada uma em %. Precisa de mais? "Adicionar cor" libera a terceira parada.
-
Ajuste tipo e ângulo
Linear ou radial, num clique. No linear, o slider gira o degradê de 0 a 360° — o preview grande acompanha cada ajuste em tempo real.
-
Copie o CSS
A declaração background: fica pronta embaixo do preview, sempre atualizada. Um clique em "Copiar CSS" e é só colar no seu projeto.
Perguntas frequentes
Qual a diferença entre linear e radial?
O linear muda de cor ao longo de uma linha reta — no ângulo que você escolher (0° sobe, 90° vai pra direita, 180° desce). O radial parte do centro e abre em círculo até as bordas, como uma luz acesa no meio do elemento.
O que a posição em % faz?
Marca onde cada cor está "pura" no trajeto. Com #fff em 0% e #000 em 100%, a transição usa o trajeto todo; suba o 0% pra 40% e o branco domina quase metade antes de começar a escurecer. É o ajuste fino que separa um degradê genérico de um proposital.
O CSS gerado funciona em todo navegador?
Sim. linear-gradient e radial-gradient são suportados por todos os navegadores desde 2017 — sem prefixo, sem fallback, sem dor de cabeça. Pode usar em produção.
Como uso o CSS copiado?
Cole a linha dentro de qualquer seletor: .hero { background: linear-gradient(135deg, #d63327 0%, #243b4a 100%); }. Funciona em qualquer elemento — div, botão, body, seção inteira.
Dá pra fazer degradê com transparência?
A ferramenta trabalha com cores sólidas em hex. Pra ter transparência, troque um hex no CSS copiado por rgba() ou um hex de 8 dígitos (ex.: #d6332700 é o vermelho invisível) — o navegador faz a transição do mesmo jeito.
Alguma coisa que eu monto aqui é enviada pra algum servidor?
Não. O preview e o CSS são gerados dentro do seu navegador, no seu aparelho. Nada sai do seu computador.