# Gradientes no modo escuro: manter a profundidade sem ofuscar

[Canonical HTML page](https://gradiently.design/pt-pt/guide/dark-mode-gradients)

Um gradiente que brilha com delicadeza sobre branco pode arder num ecrã escuro. Aqui fica como reajustar gradientes para o modo escuro e manter a profundidade, com CSS para prefers-color-scheme, light-dark() e um alternador manual.

## The short version

- Os gradientes do modo escuro devem ser redesenhados para o tema escuro, porque as mesmas cores saturadas que ficam equilibradas sobre branco parecem duras e ofuscantes sobre um fundo escuro.
- Em fundos escuros, baixa o croma das cores do gradiente, limita a cor viva a áreas pequenas e usa um quase preto tingido para o matiz da tua marca em vez de preto puro.
- Troca os gradientes entre temas guardando as suas cores em propriedades personalizadas CSS e redefinindo-as dentro de uma media query prefers-color-scheme: dark.
- A função CSS light-dark() escolhe entre duas cores consoante o color-scheme em vigor, o que mantém os dois valores lado a lado.
- Os gradientes escuros formam faixas de forma mais visível do que os claros, por isso vale a pena acrescentar uma camada leve de grão no modo escuro.

Os **gradientes do modo escuro** ficam melhor quando lhes dás cores próprias em vez de reaproveitares as do tema claro. Sobre um fundo escuro o olho adapta-se e cada cor saturada parece mais brilhante, por isso um gradiente que parecia calmo sobre branco começa a ofuscar. Baixa o croma, limita a cor viva a áreas pequenas, tinge o fundo em vez de usares preto puro e troca os valores com `prefers-color-scheme` ou `light-dark()`. A profundidade fica; o brilho ofuscante desaparece.

## Porque é que os gradientes do tema claro falham no escuro

Três coisas mudam quando a página escurece. As grandes áreas claras passam a ser a coisa mais brilhante da sala, o que se lê como ofuscação e não como cor. As sombras deixam de funcionar, por isso os gradientes que dependiam de arestas escurecidas para dar profundidade perdem-na. E os passos entre tons escuros ficam mais fáceis de ver, por isso os gradientes subtis começam a formar faixas. [Design em modo escuro](https://gradiently.design/pt-pt/guide/dark-mode-design) trata do tema em geral; esta página trata dos gradientes.

- Hero do tema claro: `linear-gradient(135deg, #ede9fe 0%, #c4b5fd 50%, #f9a8d4 100%)`
- Escuro ingénuo: saturação total: `linear-gradient(135deg, #7c3aed 0%, #db2777 100%)`
- Escuro afinado: luz de um canto: `radial-gradient(circle at 80% 15%, #4c1d95 0%, #1a1530 45%, #0b0a14 85%)`

O mesmo gradiente de marca de três maneiras. O do meio é o que acontece quando um design claro é simplesmente escurecido: alto, chapado, cansativo. O último mantém o violeta, mas deixa-o brilhar de um canto sobre um fundo tingido.

## Cinco regras para gradientes no modo escuro

1. **Tinge o fundo** Usa um quase preto que tenda para o teu matiz, como `#0b0a14` para marcas violeta, em vez de `#000000`. O preto puro faz a cor parecer colada.
2. **Baixa o croma** Reduz a saturação em cerca de um terço nas áreas grandes. Em OKLCH, mantém o matiz e reduz o valor de C.
3. **Encolhe a parte brilhante** Deixa a cor viva ocupar um canto ou um brilho, e deixa a maior parte da superfície perto do fundo.
4. **Eleva, não projetes sombra** Mostra a elevação com superfícies ligeiramente mais claras e gradientes que se iluminam para o topo, já que as sombras desaparecem em fundos escuros.
5. **Acrescenta grão** O ruído fino quebra os degraus visíveis nas misturas escuras. [Gradientes com grão](https://gradiently.design/pt-pt/guide/grainy-gradients) tem a receita.

- Fundo: #0b0a14
- Superfície: #1a1530
- Elevado: #2a2148
- Violeta profundo: #4c1d95
- Acento: #8b5cf6
- Acento de texto: #c4b5fd

Um conjunto de gradientes escuros para uma marca violeta. Na maior parte do ecrã usam-se os três primeiros; o acento aparece em sítios pequenos, e o lilás pálido fica reservado a texto e ícones.

## Alternar gradientes com prefers-color-scheme

Guarda as cores do gradiente, não gradientes inteiros, em propriedades personalizadas. Assim o tema escuro só tem de redefinir as cores, e todos os componentes que as usam se atualizam. É o mesmo padrão descrito em [variáveis CSS para temas](https://gradiently.design/pt-pt/guide/css-custom-properties-theming).

```css
: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);
}
```

Como --hero e as suas cores vivem no mesmo elemento, redefinir as cores na media query atualiza o gradiente em todo o lado onde é usado. O color-scheme também diz ao browser para escurecer as barras de deslocamento e os controlos de formulário.

Repara que os brilhos escuros são mais profundos, não mais brilhantes. Sobre um fundo escuro, uma cor só precisa de ser um pouco mais clara do que o que a rodeia para se ler como luz.

### Usar light-dark()

A função `light-dark()` devolve a primeira cor num esquema claro e a segunda num esquema escuro. Precisa de `color-scheme: light dark` no elemento ou num antecessor, e é suportada no Chrome, Edge, Safari e Firefox atuais. Mantém os dois valores numa só linha, o que facilita rever uma paleta.

```css
: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);
}
```

Nos browsers atuais o light-dark() recebe cores, não imagens, por isso usa-o em cada paragem e não no gradiente inteiro.

### Suportar um alternador manual de tema

Muitos sites deixam as pessoas sobrepor a definição do sistema. Põe a escolha no elemento raiz e limita as variáveis a ela. A media query trata do predefinido; o atributo ganha quando alguém escolhe.

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

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

Definir color-scheme com um único valor faz o light-dark() seguir também o alternador.

## Reajustar um gradiente para o modo escuro

Aqui fica o mesmo gradiente de marca ajustado paragem a paragem. Trabalhar em OKLCH torna isto previsível, porque a luminosidade e o croma são números separados; [OKLCH explicado](https://gradiently.design/pt-pt/guide/oklch-explained) mostra porquê.

| Paragem | Tema claro | Tema escuro | Alteração |
| --- | --- | --- | --- |
| Fundo | `oklch(98% 0.01 295)` | `oklch(15% 0.03 295)` | Quase preto tingido, não preto |
| Principal | `oklch(85% 0.09 295)` | `oklch(35% 0.15 295)` | Mais escuro, croma mantido moderado |
| Acento | `oklch(84% 0.10 350)` | `oklch(40% 0.12 265)` | Desviado para tons mais frios para evitar um rosa ardente |
| Acento de texto | `oklch(45% 0.20 295)` | `oklch(82% 0.09 295)` | Mais claro e mais suave para texto pequeno |

O matiz mantém-se nas cores principais, por isso a marca continua a reconhecer-se nos dois temas.

Hero do tema escuro, em OKLCH: `radial-gradient(circle at 80% 15%, oklch(35% 0.15 295) 0%, transparent 45%), radial-gradient(circle at 10% 90%, oklch(40% 0.12 265) 0%, transparent 50%), linear-gradient(oklch(15% 0.03 295), oklch(15% 0.03 295))`

Os valores escuros da tabela, em camadas. Copia-o e ajusta depois o croma até o brilho parecer quente e não vivo.

## Texto sobre gradientes escuros

O texto claro sobre um gradiente escuro costuma ter contraste de sobra, mas verifica-o onde o gradiente é mais brilhante, não onde é mais escuro. Um título em `#e2e8f0` sobre `#0b0a14` está muito acima dos 4,5:1 que o WCAG pede ao texto corrido; o mesmo título sobre um brilho violeta intenso pode não estar. Evita também texto corrido em branco puro sobre quase preto: o contraste muito alto causa halação em alguns leitores, por isso um branco suave e sujo é mais gentil. [Contraste de cor e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) tem os números.

### Evita no modo escuro

- Fundo preto puro com paragens saturadas
- O gradiente do tema claro, escurecido
- Grandes áreas de cor néon
- Parágrafos em branco puro
- Gradientes escuros lisos sem grão

### Faz

- Um fundo quase preto tingido
- Um conjunto separado de paragens escuras
- A cor como luz de um canto
- Texto em branco sujo, cerca de `#e9e5f5`
- Uma camada de ruído fino para esconder as faixas

Para mais paletas escuras, [fundos de gradiente escuros](https://gradiently.design/pt-pt/guide/dark-gradient-backgrounds) tem um conjunto para copiar. E para publicações sociais e diapositivos, onde não consegues testar cada linha à mão, o Tinta automática do Gradiently escolhe texto claro ou escuro por linha a partir da paleta do próprio Mark, e o Mark move a sua zona mais calma para trás das palavras, por isso um design escuro nunca põe um título sobre o seu brilho mais forte.

## FAQ

### Como mudo um gradiente no modo escuro?

Põe as cores do gradiente em propriedades personalizadas CSS e redefine-as dentro de `@media (prefers-color-scheme: dark)`. O gradiente atualiza-se onde quer que use essas variáveis.

### Posso usar light-dark() dentro de um gradiente?

Sim, em cada paragem de cor, já que o light-dark() devolve uma cor. Precisa de `color-scheme: light dark` no elemento ou num antecessor.

### Porque é que os meus gradientes parecem demasiado brilhantes no modo escuro?

Os olhos adaptam-se aos ecrãs escuros, por isso as cores saturadas parecem mais fortes. Baixa o croma, escurece as paragens e limita a cor brilhante a áreas pequenas.

### O modo escuro deve usar preto puro?

Normalmente não, nos gradientes. Um quase preto tingido para o matiz da tua marca faz as cores misturarem-se com naturalidade e reduz o contraste duro.

### Porque é que o meu gradiente escuro mostra riscas?

Os tons escuros ficam muito próximos em cor de 8 bits, por isso os degraus tornam-se visíveis. Acrescenta uma camada leve de grão e evita a compressão pesada.