Gradientes subtis: mudanças de cor discretas para interfaces limpas

Um gradiente subtil passa entre duas cores tão próximas que sentes a mudança mais do que a vês: do branco para um branco-sujo frio, do quase preto para um quase preto ligeiramente mais suave. Essa pequena variação faz uma superfície parecer iluminada, e é por isso que as 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; maior do que isso e o gradiente começa a tornar-se um elemento em vez de uma superfície.

Códigos de gradientes subtis claros

Cada um destes começa perto do branco e desliza para uma tinta ténue. Escolhe a tinta a partir da cor da tua marca para que até o fundo leve um traço de identidade. As misturas de cima para baixo parecem as mais naturais, porque a luz costuma vir de cima.

Códigos de gradientes subtis escuros

As superfícies escuras beneficiam ainda mais, porque o preto liso e puro parece um buraco no ecrã. Levanta um pouco o topo e deixa o fundo assentar. Os gradientes para o modo escuro tratam de temas inteiros; estes são os blocos de construção.

Onde funcionam os gradientes subtis numa interface

A regra de ouro: um gradiente subtil nunca deve ser aquilo a que olhas. Se um revisor comentar o gradiente, é forte demais para um fundo. Para visuais mais contidos, tanto em impressão e redes sociais como em ecrãs, vê os fundos minimalistas.

Como tingir um gradiente subtil com a cor da tua marca

Um gradiente de cinzento neutro é seguro mas anónimo. Tingir a ponta mais clara ou a mais escura com um traço do matiz da tua marca faz toda a interface parecer relacionada com o logótipo sem que ninguém consiga apontar porquê. O truque é manter o matiz e deitar fora quase toda a saturação.

1. 1

   Toma o matiz da marca

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

2. 2

   Mantém-no quase cinzento

   Define a croma muito baixa, cerca de 0,005 a 0,015 em oklch, ou uma saturação abaixo de cerca de 30% em HSL com luminosidade muito alta. Queres um sussurro de cor, não um pastel.

3. 3

   Define dois valores de luminosidade

   Para temas claros, experimenta 99% e 96%; para temas escuros, cerca de 20% e 15%. Mantém as duas pontas no mesmo matiz para a mistura nunca derivar para cinzento ou para uma segunda cor.

4. 4

   Confere-o ao lado do branco ou do preto puros

   Põe o gradiente ao lado de um bloco simples de branco ou preto. Se não vires qualquer diferença, ajusta a ponta inferior; se a tinta for óbvia do outro lado da sala, baixa a croma.

A mesma tinta pode depois passar para bordas, divisórias e estados de passagem do rato, para o gradiente ser uma parte de um sistema discreto e não um efeito solitário. Os botões são o único sítio onde se pode permitir uma variação ligeiramente mais forte, uns por cento mais escura em baixo, porque uma ideia de volume ajuda-os a parecer clicáveis.

Escrever um gradiente subtil em CSS

Os códigos hex funcionam em todo o lado. Para um controlo mais fino, escreve as cores em oklch, onde o primeiro número é a luminosidade percebida, para definires 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. O gradiente CSS em oklch explica a sintaxe, e o gradiente linear CSS trata do 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;
}

Porque é que os gradientes subtis fazem banding, e a solução

Duas cores próximas têm muito poucos passos entre si numa imagem de 8 bits. Estica-as num destaque de 1920 píxeis e cada passo torna-se uma risca visível, sobretudo em gradientes escuros e ecrãs mais baratos. A explicação completa está no banding em gradientes.

Na web, uma pequena textura de ruído em SVG por cima do gradiente, com baixa opacidade, remove os passos visíveis sem que ninguém repare no grão; a textura de ruído em CSS tem o código. Para posts e diapositivos, um Mark do Gradiently leva o seu próprio grão e desenha-se em todos os tamanhos, por isso um fundo discreto fica suave seja um story ou um banner. Quando queres o oposto do discreto, os gradientes vibrantes têm os códigos saturados.