Suporta tipos de gradiente CSS linear, radial e cônico.
Ajuste livremente o ângulo e as posições de parada de cor para obter gradientes perfeitos em pixels.
Veja as mudanças de gradiente em tempo real conforme você ajusta os parâmetros.
O código CSS gerado está pronto para ser colado diretamente em seu projeto.
Todo o processamento acontece localmente no seu navegador. Nenhum dado enviado para qualquer servidor.
Sem registro, sem limites. Gratuito para usar para sempre.
Um guia completo para todos os três tipos de gradiente CSS, incluindo sintaxe, parâmetros e exemplos práticos.
Guia Completo (em inglês)Explore as tendências atuais de design de gradiente, desde gradientes suaves até combinações de cores ousadas, e encontre sua inspiração de design.
Tendências de design (em inglês)Entenda como os gradientes CSS impactam o desempenho de renderização da página e aprenda a escrever estilos de gradiente de alto desempenho.
Desempenho (em inglês)Aprenda como usar gradientes garantindo a acessibilidade na web e a conformidade com as WCAG.
Acessibilidade (em inglês)Adicione paradas de cores, escolha suas posições e selecione o tipo de gradiente. A ferramenta produz CSS a partir dessas configurações.
Ajuste as cores, pare as posições e a direção enquanto visualiza a visualização. Copie o CSS gerado quando ele corresponder ao efeito desejado.