Sobre esta ferramenta
Gradientes CSS estão em todo lugar — fundos hero, botões, cartões — mas escrever a sintaxe à mão e adivinhar ângulos é chato. Este construtor visual permite adicionar e arrastar paradas de cor, definir o ângulo e alternar entre gradientes lineares, radiais e cônicos enquanto vê o resultado preencher uma prévia ao vivo.
Quando ficar bom, copie o CSS de background pronto direto para a sua folha de estilos. É totalmente do lado do cliente, então experimente à vontade — nada é enviado.
Perguntas frequentes
Esse gerador adiciona prefixos de fornecedor como -webkit-linear-gradient?
Não. A sintaxe com prefixo só é necessária em navegadores muito antigos (anteriores a 2012), então a ferramenta gera linear-gradient(), radial-gradient() e conic-gradient() padrão, que qualquer navegador atual entende.
Meu design de gradiente é enviado ou salvo em algum lugar?
Não. Tudo — pontos de cor, ângulo e a pré-visualização — é gerado em tempo real no seu navegador; nada é enviado a um servidor.
Qual a diferença entre gradiente linear, radial e cônico?
O linear mistura as cores ao longo de uma linha reta em um ângulo escolhido, o radial se espalha para fora a partir de um ponto central em círculos, e o cônico gira as cores ao redor de um ponto central como uma roda de cores.
Quantos pontos de cor posso adicionar?
Quantos você precisar — clique em 'Add' para inserir outro ponto, arraste o controle deslizante de posição, e remova qualquer ponto exceto os últimos dois.
Posso colar o CSS gerado diretamente na minha folha de estilos?
Sim. Clique em Copiar e cole a linha `background: ...;` diretamente em qualquer regra CSS ou estilo inline — sem necessidade de edição.