Degradês sutis: mudanças de cor discretas para interfaces limpas

Um degradê sutil passa de uma cor para outra tão próximas que você sente a mudança mais do que a vê: do branco para um off-white frio, do quase preto para um quase preto um pouco mais suave. Essa pequena variação deixa a superfície com cara de iluminada, e é por isso que interfaces limpas os usam em fundos de página, cartões e painéis do modo escuro. Os códigos abaixo mantêm a diferença de luminosidade em poucos por cento; mais que isso, e o degradê deixa de ser uma superfície e vira um elemento de destaque.

Códigos de degradê sutil claro

Todos estes começam perto do branco e vão para um tom bem leve. Escolha o tom a partir da cor da sua marca, para que até o fundo carregue um traço de identidade. Misturas de cima para baixo parecem mais naturais, porque a luz costuma vir de cima.

Códigos de degradê sutil escuro

Superfícies escuras ganham ainda mais, porque o preto puro e chapado parece um buraco na tela. Levante um pouco o topo e deixe a base assentar. Degradês para modo escuro trata de temas inteiros; estes são os blocos de construção.

Onde degradês sutis funcionam numa interface

A regra prática: um degradê sutil nunca deve ser o que você olha. Se alguém comenta o degradê, ele está forte demais para um fundo. Para visuais mais contidos, também em impressos e redes sociais, veja fundos minimalistas.

Como tingir um degradê sutil com a cor da sua marca

Um degradê cinza neutro é seguro, mas anônimo. Tingir o extremo mais claro ou o mais escuro com um traço do matiz da marca faz toda a interface parecer ligada ao logo, sem que ninguém consiga apontar por quê. O truque é manter o matiz e descartar quase toda a saturação.

1. 1

   Pegue o matiz da marca

   Converta a cor principal da marca para oklch ou HSL e anote só o matiz: cerca de 265 para um violeta, 160 para um verde, 30 para um laranja quente.

2. 2

   Mantenha quase cinza

   Use croma bem baixo, de 0,005 a 0,015 em oklch, ou saturação abaixo de uns 30% em HSL com luminosidade muito alta. Você quer um sussurro de cor, não um pastel.

3. 3

   Defina dois valores de luminosidade

   Para temas claros, tente 99% e 96%; para temas escuros, cerca de 20% e 15%. Mantenha os dois extremos no mesmo matiz, para a mistura nunca derivar para o cinza ou para uma segunda cor.

4. 4

   Confira ao lado de branco ou preto puro

   Coloque o degradê ao lado de um bloco de branco ou preto liso. Se você não vê diferença nenhuma, ajuste o extremo inferior; se o tom aparece de longe, diminua o croma.

O mesmo tom pode então passar para bordas, divisores e estados de hover, e o degradê passa a ser parte de um sistema discreto, e não um efeito isolado. Botões são o único lugar onde vale permitir uma variação um pouco mais forte, alguns por cento mais escura embaixo, porque um indício de volume ajuda a parecerem clicáveis.

Como escrever um degradê sutil em CSS

Códigos hex funcionam em qualquer lugar. Para um controle mais fino, escreva as cores em oklch, onde o primeiro número é a luminosidade percebida, e assim você define a variação com exatidão: de 99% a 96%, por exemplo. Misturar em oklch também mantém a mudança uniforme ao longo de todo o comprimento. CSS gradient oklch explica a sintaxe, e CSS linear gradient cobre o básico.

:root {
  --surface: linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  :root {
    /* lightness 99% to 96.5%, the same faint cool tint */
    --surface: linear-gradient(180deg in oklch, oklch(99% 0.003 250) 0%, oklch(96.5% 0.006 250) 100%);
  }
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--surface);
  background-attachment: fixed;
}

Por que degradês sutis formam faixas e como resolver

Duas cores próximas têm pouquíssimos passos entre si numa imagem de 8 bits. Estique-as por um destaque de 1920 pixels e cada passo vira uma listra visível, sobretudo em degradês escuros e telas mais baratas. A explicação completa está em faixas em degradês.

Na web, uma pequena textura de ruído em SVG sobreposta ao degradê com baixa opacidade elimina os passos visíveis sem que ninguém note o grão; CSS noise texture traz o código. Para posts e slides, um Mark do Gradiently já traz o próprio grão e renderiza em qualquer tamanho, então um fundo discreto continua suave seja num story ou num banner. Quando você quiser o oposto do discreto, degradês vibrantes tem os códigos saturados.