Desenvolvimento Web
CSS Gradient Generator
Montar um gradiente linear, radial ou cônico a partir de várias cores e obter o CSS pronto.
0° — em cima, depois no sentido horário.
A CSS gradient is a smooth transition between multiple colors, generated by the browser itself with no image needed. This tool lets you visually build a linear, radial, or conic gradient and copy the finished CSS instantly.
How to use it
- Add color stops and drag them to fine-tune where each transition happens.
- Pick a gradient type — linear (a direction in degrees), radial (shape and center position), or conic (rotation around a point).
- Copy the finished CSS with one click and paste it into background or background-image.
Common uses
- Picking a background for a hero section or button without opening a graphics editor.
- Recreating a gradient from a design mockup (Figma, etc.) in exact CSS syntax.
- Quickly experimenting with color transitions before locking a choice into a design system.
Things to keep in mind
A radial gradient defaults to stretching into the shape of its element (an ellipse), not always staying a circle — worth accounting for on rectangular blocks.
Multiple gradients can be layered by listing them comma-separated in background-image — it works like stacked layers, with the first one in the list on top.
Artigo sobre esta ferramenta: Gradientes CSS: como linear difere de radial e conic
Perguntas frequentes
Qual a diferença entre gradientes lineares, radiais e cônicos?
Gradientes lineares fazem transição ao longo de uma linha reta em um ângulo escolhido, gradientes radiais se espalham para fora de um ponto central como um círculo ou elipse, e gradientes cônicos varrem cores ao redor de um ponto central como uma roda de cores.
Gradientes cônicos são suportados em todos os navegadores?
Todos os principais navegadores atuais suportam gradientes cônicos, mas é um recurso CSS mais novo que gradientes lineares ou radiais, então versões muito antigas de navegadores podem não renderizá-lo.
O que eu obtenho como saída?
A ferramenta gera sintaxe CSS background pronta para uso com suas cores, paradas e posições escolhidas, que você pode colar diretamente na sua folha de estilo.
Qual a diferença entre repeating-linear-gradient e um linear-gradient comum?
Um linear-gradient comum estica sua sequência de cores exatamente uma vez em todo o elemento, enquanto repeating-linear-gradient repete essa mesma sequência de color stops ciclicamente, produzindo um fundo listrado ou com padrão.
Posso empilhar vários gradientes um sobre o outro como fundo?
Sim, a propriedade background-image aceita uma lista de gradientes separados por vírgula, e eles se sobrepõem em camadas da mesma forma que várias imagens de fundo fariam — o primeiro da lista fica por cima.