Gerador de degradês CSS
O que é um degradê CSS?
Os degradês CSS permitem exibir transições suaves entre duas ou mais cores sem usar arquivos de imagem. Existem três tipos: linear-gradient (ao longo de uma linha reta), radial-gradient (irradiando de um ponto central) e conic-gradient (girando em torno de um ponto central). Os degradês são usados para fundos, botões, sobreposições e elementos decorativos.
Como usar o gerador de degradês CSS
-
Escolha uma predefinição nas amostras ou configure seu próprio degradê.
-
Escolha o tipo de degradê: linear, radial ou conic.
-
Ajuste o ângulo (para linear/conic) ou a forma (para radial).
-
Edite os pontos de cor — altere cores e posições (0–100%).
-
Adicione ou remova pontos de cor conforme necessário.
-
Copie o CSS e cole-o na sua folha de estilos.
Perguntas Frequentes
Como faço um gradiente transparente? Use valores de cor rgba() ou hsla() com um canal alfa de 0 para transparência total. Por exemplo, uma parada de cor rgba(0,0,0,0) é um preto totalmente transparente, útil para sobreposições com fade-out em imagens.
Como criar uma parada de cor dura (sem transição)? Coloque dois pontos de parada de cor na mesma posição — um terminando e outro começando nesse ponto. Por exemplo, red 50%, blue 50% cria uma mudança instantânea de vermelho para azul no ponto médio, sem transição de gradiente.
Quais navegadores suportam gradientes cônicos? Gradientes cônicos são suportados em todos os navegadores modernos (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). Não são suportados no Internet Explorer.
Posso usar múltiplos gradientes no mesmo elemento? Sim. CSS background aceita uma lista separada por vírgula de camadas. Você pode empilhar gradientes, combiná-los com imagens de fundo e controlar independentemente a posição e o tamanho de cada camada.
Keywords: gerador de degradê CSS, gradiente linear, gradiente radial, gradiente cônico, gerador de fundo CSS, seletor de cor para degradê, ferramenta de gradiente CSS