Escolha entre linear, radial ou cônico, arraste as cores na barra abaixo para ajustar a posição de cada uma, e copie o código CSS pronto. Tudo é montado no seu navegador.
| Tipo | Como funciona | Boa para |
|---|---|---|
| Linear | Cores em linha reta, num ângulo escolhido | fundos, botões, cabeçalhos |
| Radial | Cores se espalham a partir do centro | destaque central, efeito de luz |
| Cônico | Cores giram em volta do centro, como um relógio | seletores de cor, indicadores circulares |
Clique em qualquer ponto da barra de gradiente para selecionar aquela cor, o seletor abre logo abaixo com um anel de matiz e um controle de saturação e luminosidade. Também dá para digitar o código hexadecimal diretamente, se você já souber qual cor quer usar.
Depois de gerar seu gradiente, você pode conferir uma paleta de cores pronta para combinar com ele, ou gerar um texto placeholder para preencher o layout enquanto o conteúdo final não fica pronto.
Sim. Os três tipos, linear, radial e cônico, são suporte nativo dos navegadores modernos, sem necessidade de prefixo especial.
De 2 a 5 cores. Cada cor vira um ponto de parada que você pode reposicionar arrastando na barra do gradiente.
Sim, é CSS puro e pronto para colar em qualquer propriedade que aceite background ou background-image.