Gerador de gradientes CSS
Desenhe fundos com gradiente arrastando paradas de cor sobre uma barra, escolha o tipo (linear, radial ou cônico) e copie um CSS pronto para produção, com cor de fallback e versão moderna em OKLCH sem zonas acinzentadas.
Processado 100% no seu navegador
Ctrl + Enter executarCtrl + C copiar resultado
Como usar
- 1Escolha o tipo de gradiente e ajuste o ângulo ou o centro.
- 2Arraste as paradas sobre a barra; clique na barra para adicionar uma nova.
- 3Selecione uma parada para mudar a cor ou a posição exata.
- 4Copie o CSS ou compartilhe um link para o seu gradiente.
Casos de uso
- Fundos de seções hero, cards e botões.
- Sobreposições de cor em imagens.
- Gráficos de pizza e rodas de cor com conic-gradient.
- Testar combinações da marca antes de levá-las ao Figma ou ao código.
Perguntas frequentes
Qual a diferença entre gradiente linear, radial e cônico?
O linear avança em linha reta conforme um ângulo; o radial se expande a partir de um centro em círculo ou elipse; o cônico gira em torno de um ponto como os ponteiros de um relógio, ideal para gráficos de pizza.
O que a interpolação em OKLCH acrescenta?
Ao misturar cores em sRGB, o meio de alguns gradientes (por exemplo, de azul a amarelo) fica acinzentado. Interpolando em OKLCH, a transição continua viva. O CSS inclui uma linha sRGB de fallback para navegadores antigos.
Preciso de prefixos como -webkit-?
Não. linear-gradient, radial-gradient e conic-gradient funcionam sem prefixos em todos os navegadores atuais. Também incluímos uma cor sólida de fallback.
Posso compartilhar ou salvar um gradiente?
Sim. As configurações ficam na URL: copie o link com «Compartilhar» e quem abrir verá exatamente o mesmo gradiente.