Handytool
DesenvolvedorGrátisRoda localmente

Gerador de gradiente CSS

Construa gradientes CSS lineares, radiais e cônicos — arraste paradas, escolha cores, copie o CSS.

Visualização
CSS
background: linear-gradient(135deg, #B7FF3E 0%, #0a0a0a 100%);
Tipo
Predefinições

Adicione até seis paradas de cor, arraste o controle deslizante de posição e copie o CSS.

Sobre Gerador de gradiente CSS

O gerador de gradiente CSS do Handytool constrói gradientes lineares, radiais e cônicos com até seis paradas de cor. Arraste a posição de uma parada, altere sua cor, mude o tipo de gradiente e a visualização ao vivo e a declaração CSS se atualizam instantaneamente. Comece com um dos presets integrados — Lime Swiss, Sunset, Sky, Aurora — ou projete o seu do zero.

Recursos de Gerador de gradiente CSS

  • 01

    Linear, radial e cônico

    Linear é o gradiente de fundo cotidiano; radial é ótimo para realces e vinhetas; cônico é perfeito para gráficos de pizza, rodas de cores e fundos rotativos.

  • 02

    Até seis paradas de cor

    Adicione e remova paradas, defina a posição de cada uma com um controle deslizante e escolha sua cor através do seletor de cor do sistema ou de um valor hexadecimal. As paradas são reordenadas por posição automaticamente.

  • 03

    Declaração CSS copiável

    A saída é uma declaração background: ... completa que você pode colar diretamente em uma folha de estilos, um componente estilizado ou uma classe de valor arbitrário de Tailwind.

Perguntas frequentes sobre Gerador de gradiente CSS

Qual é a diferença entre linear, radial e cônico?
Gradientes lineares correm em linha reta em um ângulo determinado; gradientes radiais se irradiam a partir de um centro; gradientes cônicos varremo em torno de um ponto como um ponteiro de relógio. Cada um se adequa a um efeito visual diferente.
Quantas paradas de cor devo usar?
Duas paradas é o gradiente de duas cores clássico. Três ou quatro permitem criar transições realistas (pôr do sol, aurora). Mais de seis tende a parecer barulhento — é por isso que este gerador limita a seis.
Posso usar isto para fundos em um modelo de e-mail?
A maioria dos clientes de e-mail ainda não suporta gradientes CSS modernos de forma confiável — forneça uma cor de fallback sólida além do gradiente de fundo se você copiar isso em um modelo de e-mail.
A visualização é precisa em pixels?
Sim — a visualização é renderizada pelo mecanismo de gradiente nativo do navegador, portanto o que você vê é exatamente o que seu CSS produzirá.

Ferramentas relacionadas

Desenvolvedor →

Explore outras ferramentas

Todas as ferramentas →