Gerador de gradientes
Crie gradientes lineares, radiais e cônicos em várias camadas
Gerador de gradientes
Crie gradientes lineares, radiais e cônicos em várias camadas
Dica: Arraste as alças na prévia para mudar a direção do gradiente. Arraste os marcadores na barra para reposicionar as paradas de cor e as abas das camadas para mudar a ordem.
Código CSS
background-image + background-color
Como o gerador de gradientes funciona
Crie gradientes CSS lineares, radiais e cônicos em várias camadas. Ajuste as paradas de cor visualmente e copie CSS pronto para produção.
Gradientes em várias camadas
Empilhe várias camadas de gradiente e misture-as visualmente. Cada camada tem tipo, cores e ângulo próprios. Combine gradientes lineares, radiais e cônicos em um só elemento.
Paradas de cor precisas
Adicione, mova e exclua paradas de cor em uma barra visual. Ajuste a posição e a opacidade de cada parada. O CSS se atualiza em tempo real enquanto você arrasta.
Linear, radial e cônico
Escolha entre três tipos de gradiente em cada camada. Defina o ângulo no linear, a forma e a posição no radial e o ângulo inicial no cônico. Misture tipos diferentes nas camadas.
Copiar CSS
Copie o CSS completo do fundo, com todas as camadas, em um clique. O código usa a sintaxe padrão de gradientes CSS, compatível com todos os navegadores modernos.
Perguntas frequentes
O gradiente linear faz a transição de cores ao longo de uma linha reta, em um ângulo definido. O radial se espalha de um ponto central para fora, em círculo ou elipse. O cônico gira as cores em torno de um ponto central, como um gráfico de pizza. Cada tipo cria um efeito visual diferente.
Sim. O CSS permite empilhar vários gradientes em uma única propriedade background, separados por vírgulas. Esta ferramenta facilita adicionar camadas, reordená-las e visualizar o resultado combinado.
Uma parada de cor define uma cor em uma posição específica da linha do gradiente (de 0% a 100%). O navegador interpola suavemente as cores entre paradas vizinhas. Quanto mais paradas, mais controle você tem sobre as transições de cor.
Sim. Os gradientes CSS — lineares, radiais e cônicos — funcionam em todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge. Os cônicos foram os últimos a ganhar suporte completo e funcionam em todo lugar desde 2020.