Gerador de degradê

Crie degradês lineares, radiais e cônicos e exporte CSS ou uma imagem

Os arquivos não saem do seu dispositivo
Roda no navegador
Grátis, sem cadastro, sem marca d’água

Color stops

Click the bar to add a stop. Drag handles to move them; arrow keys nudge, Delete removes.

Code

background: linear-gradient(135deg, #4f46e5 0%, #5d45e5 3.13%, #6a44e5 6.25%, #7643e3 9.38%, #8243e1 12.5%, #8d42de 15.63%, #9742db 18.75%, #a141d6 21.88%, #ab41d1 25%, #b541cc 28.13%, #be42c6 31.25%, #c642bf 34.38%, #cf42b8 37.5%, #d743b1 40.63%, #de44a9 43.75%, #e546a1 46.88%, #ec4899 50%, #f14b90 53.13%, #f54e87 56.25%, #f8527e 59.38%, #fb5775 62.5%, #fe5b6c 65.63%, #ff6063 68.75%, #ff665a 71.88%, #ff6c51 75%, #ff7247 78.13%, #ff783e 81.25%, #ff7e35 84.38%, #ff842b 87.5%, #fd8b21 90.63%, #fb9118 93.75%, #f89810 96.88%, #f59e0b 100%);
background: linear-gradient(in oklch 135deg, #4f46e5 0%, #ec4899 50%, #f59e0b 100%);

The first line is a fallback with precomputed stops for browsers without “in oklab/oklch” support.

Como usar Gerador de degradê

Monte degradês lineares, radiais e cônicos com quantas paradas de cor você quiser, misturadas em sRGB, OKLab ou OKLCH. Copie o resultado como CSS, uma classe Tailwind ou SVG, ou baixe como imagem PNG, JPG ou WebP de até 8192 px por lado.

1
Escolha um Tipo (Linear, Radial ou Cônico) e defina o Ângulo, a Forma ou o centro; para radial e cônico você pode arrastar na prévia para mover o centro.
2
Edite as Paradas de cor: clique na barra para adicionar uma parada, arraste as alças para movê-las e mude cada cor e posição na lista.
3
Escolha como Misturar cores em (sRGB, OKLab ou OKLCH), ou comece por um dos Presets ou Aleatório.
4
Copie o código da aba CSS, Tailwind ou SVG.
5
Para uma imagem, defina Largura e Altura ou escolha um tamanho, escolha PNG, JPG ou WebP e clique em Baixar.

Perguntas frequentes

Qual é a diferença entre a mistura sRGB, OKLab e OKLCH?

sRGB é a mistura clássica do CSS, em que cores complementares podem ficar cinza no meio. OKLab é perceptualmente uniforme, sem meios turvos. OKLCH mantém as cores vivas ao percorrer a roda de matizes.

Degradês OKLab e OKLCH funcionam em navegadores antigos?

A saída CSS começa com uma linha de fallback que usa paradas pré-calculadas para navegadores sem suporte a “in oklab” ou “in oklch”. O código SVG e as imagens baixadas também usam paradas pré-calculadas, então ficam iguais em qualquer lugar.

Por que a aba SVG fica desativada para degradês cônicos?

SVG não tem degradê cônico. Baixe uma imagem PNG, JPG ou WebP.

Posso usar paradas transparentes?

Sim, cores com alfa, como rgba() ou #rrggbbaa, funcionam. Baixe PNG ou WebP para manter a transparência, já que JPG não tem canal alfa.

A imagem é feita em um servidor?

Não. A imagem é desenhada em um canvas no seu navegador e salva direto, em qualquer tamanho de 1 a 8192 px por lado.

Como afino uma parada com o teclado?

Foque a alça de uma parada e use as setas para movê-la em 1% (Shift para 10%), Home ou End para ir às extremidades e Delete para removê-la. Um degradê sempre mantém pelo menos duas paradas.