Pressione Ctrl+D para adicionar esta página aos favoritos
Gerador gratuito de gradientes CSS. Crie visualmente gradientes lineares, radiais e cônicos, depois copie o código CSS. Tudo no navegador.
Como usar Gerador de gradiente?
Selecione o tipo de gradiente.
Adicione paradas de cor e defina cores.
Copie o código CSS gerado.
Perguntas frequentes sobre Gerador de gradiente
Quais tipos de gradiente são suportados?
Lineares, radiais e cônicos.
Posso copiar o código CSS diretamente?
Sim, copie com um clique o código CSS para aplicar diretamente.
Por que surge uma faixa cinza no meio do meu degradê?
Quando duas cores ficam opostas na roda, a mistura passa por um ponto em que a saturação cai perto de zero, e isso aparece como uma faixa cinza sem graça. As duplas azul-laranja e vermelho-verde são as culpadas habituais. Acrescentar uma terceira cor como parada intermediária contorna o cinza, e escolher dois matizes vizinhos na roda evita o problema de saída.
Posso salvar o degradê como arquivo de imagem, e não só como CSS?
Sim, dá para baixar um PNG e usá-lo direto como fundo de slide, imagem para redes ou peça impressa. Já para uma página web, o CSS é a melhor escolha: não há arquivo a baixar, o degradê se estica a qualquer tamanho de tela sem quebrar e nunca mostra o serrilhado de um bitmap ampliado.
Como aproveitar Gerador de gradiente ao máximo?
Misture dois tons próximos no círculo cromático; opostos criam um cinza sujo no meio.
A diagonal de 135 graus é a escolha mais segura para banners e fundos de card.
Se for colocar texto por cima, teste o contraste na parada mais clara do gradiente.