Como removo uma parada de cor?

Selecione a parada e pressione Delete ou Backspace, ou use o botão de lixeira. Um gradiente sempre mantém pelo menos duas paradas.

Esses gradientes funcionam em todos os navegadores?

Gradientes lineares e radiais funcionam em todos os navegadores atuais. Gradientes cônicos funcionam no Chrome, Edge, Firefox e Safari 12.1 ou posterior.

Posso mover as paradas pelo teclado?

Sim. Selecione uma parada com Tab e use as setas (Shift para passos de 10), Home e End. O seletor de ângulo também funciona com as setas.

Gerador de gradiente CSS — Linear, radial e cônico

Crie gradientes CSS lineares, radiais e cônicos com paradas de cor arrastáveis, seletor de ângulo e presets. Copie o CSS ou uma classe Tailwind. Grátis.

Paradas de corClique para adicionar · arraste para mover

CSS

background: #fa69c3;
background: linear-gradient(120deg, #7f5af0 0%, #ff6ac1 52%, #ffb86b 100%);

Tailwind

bg-[linear-gradient(120deg,#7f5af0_0%,#ff6ac1_52%,#ffb86b_100%)]

Presets

Referências de formatos

MDN — CSS gradients
Tailwind CSS — Arbitrary values

Página da ferramenta atualizada: 2026-10-23

Presets

Guia e exemplo

Ferramentas relacionadas

Referências de formatos