Ferramenta 05
Gerador de gradiente
Monte um gradiente, ajuste o ângulo e copie o CSS. A interpolação em OKLCH evita a zona acinzentada que aparece no meio de gradientes entre cores opostas.
Navegadores sem suporte a in oklch caem na interpolação padrão automaticamente.
Sobre esta ferramenta
Um gradiente entre duas cores opostas no círculo cromático — azul e laranja, por exemplo — passa pelo cinza quando interpolado em sRGB, porque o caminho reto entre os dois pontos atravessa a região de baixa saturação do espaço.
Interpolar em OKLCH percorre o arco de matiz em vez da reta, mantendo a saturação ao longo da transição. É o mesmo espaço que usamos nas escalas tonais e nas relações cromáticas do catálogo.
O código gerado usa a sintaxe de espaço de interpolação do CSS Color 4. Onde ela não é suportada, o navegador ignora a declaração de espaço e aplica o gradiente normalmente.