Gradientes no modo escuro: profundidade sem ofuscar

Os gradientes do modo escuro ficam melhores quando recebem cores próprias, em vez de reaproveitar as do tema claro. Num fundo escuro o olho se adapta e toda cor saturada parece mais brilhante, então um gradiente que parecia calmo no branco passa a ofuscar. Reduza o chroma, limite a cor viva a áreas pequenas, tinja o fundo em vez de usar preto puro e troque os valores com prefers-color-scheme ou light-dark(). A profundidade fica; o brilho excessivo vai embora.

Por que gradientes do tema claro falham no escuro

Três coisas mudam quando a página escurece. Áreas grandes e claras viram a coisa mais brilhante do ambiente, o que se lê como ofuscamento, não como cor. As sombras deixam de funcionar, então gradientes que dependiam de bordas escurecidas para dar profundidade a perdem. E os degraus entre tons escuros ficam mais fáceis de ver, então gradientes sutis começam a formar faixas. Design de modo escuro trata do tema em geral; esta página é sobre os gradientes.

Cinco regras para gradientes no modo escuro

1. 1

   Tinja o fundo

   Use um quase preto que puxe para o seu matiz, como #0b0a14 para marcas violeta, em vez de #000000. O preto puro faz a cor parecer colada.

2. 2

   Reduza o chroma

   Baixe a saturação em cerca de um terço nas áreas grandes. Em OKLCH, mantenha o matiz e reduza o valor de C.

3. 3

   Encolha a parte clara

   Deixe a cor viva ocupar um canto ou um brilho, e a maior parte da superfície ficar perto do fundo.

4. 4

   Eleve, não faça sombra

   Mostre elevação com superfícies um pouco mais claras e gradientes que clareiam em direção ao topo, já que as sombras somem em fundos escuros.

5. 5

   Acrescente granulado

   Um ruído fino quebra os degraus visíveis em misturas escuras. Gradientes granulados traz a receita.

Alternando gradientes com prefers-color-scheme

Guarde em propriedades personalizadas as cores do gradiente, não gradientes inteiros. Assim o tema escuro só precisa redefinir as cores, e todo componente que as usa se atualiza. É o mesmo padrão descrito em variáveis CSS para temas.

:root {
  color-scheme: light dark;
  --ground: #faf8ff;
  --glow: #c4b5fd;
  --glow-2: #f9a8d4;
  --hero: radial-gradient(circle at 80% 15%, var(--glow) 0%, transparent 45%),
          radial-gradient(circle at 10% 90%, var(--glow-2) 0%, transparent 50%),
          var(--ground);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0b0a14;
    --glow: #4c1d95;
    --glow-2: #1e3a8a;
  }
}

.hero {
  background: var(--hero);
}

Repare que os brilhos escuros são mais profundos, não mais brilhantes. Num fundo escuro, uma cor só precisa ser um pouco mais clara que o entorno para parecer luz.

Usando light-dark()

A função light-dark() devolve a primeira cor em um esquema claro e a segunda em um escuro. Ela precisa de color-scheme: light dark no elemento ou em um ancestral, e é compatível com as versões atuais de Chrome, Edge, Safari e Firefox. Mantém os dois valores numa só linha, o que facilita revisar uma paleta.

:root {
  color-scheme: light dark;
}

.card {
  background: linear-gradient(
    180deg,
    light-dark(#ffffff, #1a1530) 0%,
    light-dark(#f5f3ff, #0b0a14) 100%
  );
  color: light-dark(#1e1b2e, #e9e5f5);
}

Aceitando um seletor de tema manual

Muitos sites deixam as pessoas sobrescrever a configuração do sistema. Coloque a escolha no elemento raiz e limite suas variáveis a ela. A media query cuida do padrão; o atributo vence quando alguém escolhe.

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0b0a14;
  --glow: #4c1d95;
  --glow-2: #1e3a8a;
}

:root[data-theme="light"] {
  color-scheme: light;
}

Reajustando um gradiente para o modo escuro

Eis o mesmo gradiente de marca ajustado ponto a ponto. Trabalhar em OKLCH torna isso previsível, porque luminosidade e chroma são números separados; OKLCH explicado mostra por quê.

Texto sobre gradientes escuros

Texto claro sobre um gradiente escuro costuma ter contraste de sobra, mas confira onde o gradiente é mais brilhante, não onde é mais escuro. Um título em #e2e8f0 sobre #0b0a14 fica muito acima dos 4,5:1 que a WCAG pede para texto corrido; o mesmo título sobre um brilho violeta intenso talvez não. Evite também parágrafos em branco puro sobre quase preto: contraste altíssimo causa halação para alguns leitores, então um off-white suave é mais gentil. Contraste de cores e acessibilidade traz os números.

Para mais paletas escuras, fundos em gradiente escuro traz um conjunto para copiar. E para posts e slides, em que você não consegue testar cada linha à mão, a Tinta automática do Gradiently escolhe tinta clara ou escura em cada linha a partir da paleta do próprio Mark, e o Mark leva sua área mais calma para trás das palavras, então um design escuro nunca põe um título sobre o brilho mais forte.