Gerador de gradiente CSS

Crie gradientes CSS lineares, radiais e cônicos com mistura OKLCH ou OKLab e fallback sRGB, depois copie CSS, Tailwind ou SVG, ou baixe um PNG.

Funciona totalmente no seu navegador - seus gradientes não são enviados para lugar nenhum.

Paradas de cor

Clique na barra para adicionar uma parada e arraste uma parada para movê-la. Com uma parada selecionada, as setas do teclado a movem e Delete a remove.

CorHexPosição (%)

Tipo

Ângulo (°)

Repetir

Predefinições

Misturar cores em

As mesmas paradas, misturadas de três formas. O sRGB clássico pode ficar cinza ou sujo entre cores distantes; o OKLab mantém o brilho uniforme e o OKLCH preserva a intensidade da cor. Navegadores que não conhecem OKLab ou OKLCH recebem um fallback sRGB com a mesma aparência.

Texto por cima

Texto branco: 2,1:1; Baixo demais
Texto preto: 4,2:1; AA só para texto grande

O menor contraste em qualquer ponto do gradiente. O WCAG AA exige 4,5:1 para texto comum e 3:1 para texto grande.

Código

Formato

background: linear-gradient(90deg, #0077a3 0%, #1178a2 1.56%, #1b79a1 3.13%, #2a7b9f 6.25%, #367d9c 9.38%, #3f7f9a 12.5%, #608591 25%, #959179 50%, #ad956b 62.5%, #c59959 75%, #dd9c41 87.5%, #e99d2f 93.75%, #ef9d22 96.88%, #f29e19 98.44%, #f59e0b 100%);
background: linear-gradient(in oklab 90deg, #0077a3 0%, #f59e0b 100%);

Tamanho da imagem

Monte um gradiente CSS no olho e copie um código que funciona em qualquer lugar. Escolha linear, radial ou cônico, arraste as paradas de cor e defina como as cores se misturam: navegadores modernos conseguem misturar em OKLab ou OKLCH, o que evita a zona cinza e apagada dos gradientes sRGB clássicos, e o código vem com um fallback sRGB equivalente para os mais antigos. Você também vê se um texto branco ou preto continua legível por cima e pode exportar uma classe Tailwind, um SVG ou um PNG de qualquer tamanho.

Perguntas frequentes

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

São formas diferentes de calcular as cores entre duas paradas. Os gradientes CSS clássicos misturam em sRGB, o que pode cair no cinza (do azul ao amarelo passa por um cinza apagado) ou escurecer no meio. O OKLab foi projetado para que passos iguais pareçam iguais, então a mistura mantém o brilho uniforme. O OKLCH mistura luminosidade, intensidade da cor e matiz separadamente, por isso percorre o círculo cromático e continua vibrante - do vermelho ao azul passa pelo roxo em vez de um malva escuro. Escreva “in oklab” ou “in oklch” dentro do gradiente para usá-los.

O gradiente OKLCH funciona em todos os navegadores?

Chrome e Edge 111+, Safari 16.2+ e Firefox 127+ entendem “in oklch” e “in oklab”. Para os mais antigos, o código tem duas linhas “background”: a primeira é um gradiente sRGB simples com paradas extras no meio, para ficar quase igual, e a segunda é a moderna. Os navegadores ignoram a linha que não entendem, então cada um recebe a melhor versão que consegue desenhar.

Como usar com o Tailwind CSS?

Escolha “Classe Tailwind” e copie: é um valor arbitrário como bg-[linear-gradient(in_oklab_90deg,_#0077a3_0%,_#f59e0b_100%)], com os espaços escritos como sublinhados, do jeito que o Tailwind espera. Cole em class - sem precisar de configuração.

Por que não consigo baixar um gradiente cônico como SVG?

O SVG só tem gradientes lineares e radiais e não consegue repetir um radial como o CSS faz. Nesses casos, baixe um PNG: ele é desenhado pixel a pixel com a mesma matemática, então corresponde exatamente ao CSS, no tamanho que você escolher.

O link de compartilhamento é privado?

O gradiente fica salvo depois do # no link, uma parte que os navegadores nunca enviam a um servidor, e a página é desenhada inteiramente no seu navegador. Nada é enviado, e o gradiente fica guardado só neste dispositivo, para continuar lá quando você voltar.