Gerador de Gradiente CSS
Crie gradientes CSS lineares e radiais com preview ao vivo. Múltiplos color stops, direção e código pronto para copiar.
O que é Gerador de Gradiente CSS?
Crie gradientes CSS lineares e radiais com preview em tempo real e código pronto para copiar. O humberto.ai permite múltiplos color stops, ajuste de direção, tipos linear/radial e preview instantâneo enquanto você ajusta — ideal para criar backgrounds de hero, botões de destaque e efeitos visuais modernos sem sair do navegador.
Como usar
- Escolha o tipo de gradiente: linear ou radial.
- Selecione a direção (para linear) ou a forma (para radial).
- Ajuste os color stops: adicione até 5, clique para mudar cor e arraste para reposicionar.
- Veja o preview em tempo real no card superior.
- Copie o código CSS gerado (ou o equivalente Tailwind, quando disponível).
Perguntas frequentes
Qual a diferença entre gradiente linear e radial?
Linear: cor muda ao longo de uma linha reta (horizontal, vertical, diagonal). Radial: cor muda de um ponto central para fora (círculo ou elipse). Linear é mais comum em UI; radial é bom para efeitos de 'spotlight' ou destaque.
Quantos color stops posso usar?
A ferramenta suporta até 5 color stops. Mais que isso geralmente fica visualmente confuso — gradientes de 2-3 cores costumam ser mais elegantes.
O código gerado funciona em todos os navegadores?
Sim. CSS gradients são suportados em todos os navegadores modernos (Chrome, Firefox, Safari, Edge) desde ~2012. Não precisa de prefixos -webkit- ou -moz- para sintaxe moderna.
Como aplicar o gradiente no meu site?
Cole o valor gerado na propriedade 'background' (ou background-image) do elemento: 'background: linear-gradient(...)'. Para textos com gradiente, use 'background-clip: text; -webkit-text-fill-color: transparent'.
Posso animar o gradiente?
Sim, mas gradientes em si não animam com 'transition'. Você precisa animar o 'background-position' de um gradiente grande, ou usar a propriedade '@property' moderna. O gerador entrega o gradiente estático — a animação é ajuste posterior no seu CSS.