CSS Gradient Generator
Monte um gradiente linear ou radial com quantas cores quiser, ajuste ângulo/direção e posição de cada cor, veja o preview ao vivo e copie o código CSS pronto.
90°
O que são gradientes CSS?
Um gradiente é uma transição suave entre duas ou mais cores. No CSS, eles são valores da
propriedade background (na verdade uma imagem gerada pelo navegador). O
linear-gradient vai de um lado a outro segundo um ângulo; o
radial-gradient irradia de um ponto central em forma de círculo ou elipse.
Cada cor pode ter uma posição (em %) que controla onde ela fica na transição.
Como usar
Escolha o tipo, ajuste o ângulo (linear) ou a forma (radial), e adicione ou remova cores. Para
cada cor você define o tom (seletor de cor) e, opcionalmente, a posição. O preview atualiza na
hora e o campo de código traz a linha CSS pronta, por exemplo
background: linear-gradient(90deg, #4f46e5 0%, #ec4899 100%);.
Perguntas frequentes (FAQ)
Como o preview evita riscos de segurança?
O gradiente aplicado ao preview é montado apenas com valores validados pelo próprio código: as cores vêm de seletores de cor (sempre um hexadecimal válido) e as posições são números limitados a 0–100%. Nada de texto livre é injetado como CSS ou HTML, o que elimina o risco de injeção.
Posso usar quantas cores?
Sim. Use "Adicionar cor" para criar novos stops e "Remover" para tirá-los (mantendo no mínimo dois, necessários para haver transição).
Qual a diferença entre círculo e elipse no radial?
Círculo mantém o raio igual em todas as direções; elipse acompanha a proporção do elemento, podendo ficar oval em áreas retangulares.