Gerador de degradê CSS
Crie rapidamente um fundo em degradê (linear-gradient) para uma página web, com prévia em tempo real e código CSS pronto para copiar — sem abrir Figma nem Photoshop.
Como funciona
Um degradê linear CSS (linear-gradient) permite criar um fundo visualmente rico — banner, botão, plano de fundo de seção — sem imagem nem ferramenta de design externa. Escolha duas cores e um ângulo, observe a prévia em tempo real, e copie diretamente a propriedade background gerada na sua folha de estilo. É a abordagem mais rápida para prototipar um fundo em degradê antes de refiná-lo no seu guia de estilo.
Posso usar mais de duas cores em um degradê?
O CSS permite isso nativamente (linear-gradient(90deg, #fff, #f00, #00f), por exemplo), mas esta ferramenta se concentra propositalmente em um degradê de duas cores, o caso de uso mais comum para um fundo de seção ou de botão. Para um degradê mais complexo, você pode copiar o resultado gerado aqui e depois adicionar pontos de cor adicionais diretamente no seu CSS.
O que representa o ângulo do degradê?
O ângulo determina a direção em que o degradê progride: 0° vai de baixo para cima, 90° vai da esquerda para a direita, 180° vai de cima para baixo, etc. É a mesma convenção usada nativamente pela função CSS linear-gradient(), então o código copiado aqui produz exatamente o resultado que você vê na prévia.
Processamento 100% local: a geração do código CSS é feita diretamente no seu navegador via WebAssembly, sem nenhuma chamada a um servidor externo.