Gerador de Gradientes CSS
Crie gradientes CSS lineares e radiais com pré-visualização ao vivo.
Escolha linear ou radial, arraste o ângulo, edite as paradas com sua porcentagem. A pré-visualização atualiza e o CSS está a um clique.
background: linear-gradient(135deg, #0a7cff 0%, #a855f7 100%);
Como usar
Escolha linear ou radial
Linear tem ângulo; radial centraliza no elemento.
Edite as paradas
Clique numa amostra para a cor; defina a porcentagem. Adicione/remova com os botões.
Copie o CSS
A declaração `background:` está pronta para colar.
O que é?
Um gerador de gradientes CSS constrói a string linear-gradient(...) ou radial-gradient(...) a partir de uma lista de paradas. Cada parada tem cor e posição; CSS interpola entre paradas consecutivas. A saída é uma declaração `background:`.
Quando usar
Fundos de hero, destaques de botões, fundos de cards, divisores ilustrativos, sistemas de marca buscando profundidade sutil sem imagem, acentos em modo escuro.
Erros comuns
Muitas paradas próximas - o gradiente fica carregado. Complementares saturados (vermelho/verde) a 50% - centro perceptual turvo, exceto se adicionar um ponto neutro. E esquecer `background-color` de fallback.
FAQ
- Por que meu gradiente fica com bandas?
- Gradientes CSS são interpolados em sRGB, o que pode produzir um meio « turvo » entre duas cores saturadas. Use a sintaxe OKLCH (linear-gradient(in oklch, ...)) para gradientes perceptualmente uniformes em navegadores modernos.