Gerador de CSS gradient

Como usar

1. Um gradiente já está na tela quando a página abre — o primeiro resultado não precisa de clique.
2. Escolha um tipo: “Linear” segue um ângulo, “Radial” se espalha a partir de um círculo, “Cônico” varre ao redor de um centro. Mude o ângulo com o controle para linear e cônico.
3. Defina as cores com as amostras e arraste cada posição (0–100%). Adicione mais cores com “+ Adicionar cor” se quiser um gradiente com vários pontos; remova até ficar com dois.
4. O CSS é atualizado ao vivo abaixo — copie com um clique e cole em qualquer lugar que aceite CSS.

Escopo, limites e dúvidas comuns

• Apenas cores opacas: as amostras são seletores de cor do navegador e não mostram alfa. Para transparência, converta a cor para uma forma com alfa primeiro e depois volte.
• Apenas um segmento padrão: linear, radial ou cônico — sem prefixos -webkit-, sem truques de camadas/múltiplos fundos, sem dimensionamento radial ou posicionamento de centro.
• Os pontos mantêm a ordem em que você os adiciona — eles não são ordenados automaticamente, então uma posição fora de ordem cria um salto duro de propósito.
• Entre 2 e 8 pontos. Reduzir para um ponto interrompe o gradiente (com um aviso) em vez de falsificá-lo.
• Sem biblioteca de predefinições, sem aplicar ao plano de fundo da página inteira, sem link de compartilhamento com o gradiente — o botão de compartilhar compartilha apenas a URL da página; nada é enviado, armazenado ou gravado na URL.
• O ângulo não faz sentido para gradientes radiais, então o controle de ângulo se esconde e o código gerado não tem ângulo.