# Gradientes no modo escuro: profundidade sem ofuscar

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

Um gradiente que brilha com educação no branco pode queimar numa tela escura. Veja como reajustar gradientes para o modo escuro e manter a profundidade, com CSS para prefers-color-scheme, light-dark() e um seletor manual.

## The short version

- Gradientes do modo escuro devem ser redesenhados para o tema escuro, porque as mesmas cores saturadas que ficam equilibradas no branco ficam duras e ofuscantes num fundo escuro.
- Em fundos escuros, reduza o chroma das cores do gradiente, limite a cor viva a áreas pequenas e use um quase preto tingido na direção do matiz da marca em vez de preto puro.
- Troque gradientes entre temas guardando as cores em propriedades personalizadas do CSS e redefinindo-as dentro de uma media query prefers-color-scheme: dark.
- A função light-dark() do CSS escolhe entre duas cores conforme o color-scheme em vigor, mantendo os dois valores lado a lado.
- Gradientes escuros formam faixas de modo mais visível que os claros, então vale acrescentar uma camada leve de granulado no modo escuro.

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](https://gradiently.design/pt-br/guide/dark-mode-design) trata do tema em geral; esta página é sobre os 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 ajustado: luz vinda de um canto: `radial-gradient(circle at 80% 15%, #4c1d95 0%, #1a1530 45%, #0b0a14 85%)`

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

## Cinco regras para gradientes no modo escuro

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. **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. **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. **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. **Acrescente granulado** Um ruído fino quebra os degraus visíveis em misturas escuras. [Gradientes granulados](https://gradiently.design/pt-br/guide/grainy-gradients) traz a receita.

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

Um conjunto de gradientes escuros para uma marca violeta. A maior parte da tela usa os três primeiros; o destaque aparece em pontos pequenos, e o lilás claro é reservado para texto e ícones.

## 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](https://gradiently.design/pt-br/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 suas cores vivem no mesmo elemento, redefinir as cores na media query atualiza o gradiente em todo lugar onde ele é usado. O color-scheme também diz ao navegador para escurecer barras de rolagem e controles de formulário.

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.

```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 navegadores atuais o light-dark() aceita cores, não imagens, então use-o em cada ponto do gradiente, não no gradiente inteiro.

### 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.

```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 também faz o light-dark() seguir o seletor.

## 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](https://gradiently.design/pt-br/guide/oklch-explained) mostra por quê.

| Ponto | Tema claro | Tema escuro | Mudança |
| --- | --- | --- | --- |
| 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, chroma moderado |
| Destaque | `oklch(84% 0.10 350)` | `oklch(40% 0.12 265)` | Deslocado para um tom mais frio, evitando um rosa ardente |
| Destaque de texto | `oklch(45% 0.20 295)` | `oklch(82% 0.09 295)` | Mais claro e suave para texto pequeno |

O matiz fica onde está nas cores principais, então a marca continua se reconhecendo 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. Copie e depois ajuste o chroma até o brilho parecer quente, e não vivo demais.

## 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](https://gradiently.design/pt-br/guide/color-contrast-accessibility) traz os números.

### Evite no modo escuro

- Fundo preto puro com pontos saturados
- O gradiente do tema claro, escurecido
- Grandes áreas de cor neon
- Parágrafos em branco puro
- Gradientes escuros lisos, sem granulado

### Faça

- Um fundo quase preto tingido
- Um conjunto separado de pontos escuros
- Cor como luz vinda de um canto
- Texto off-white, em torno de `#e9e5f5`
- Uma camada de ruído fino para esconder as faixas

Para mais paletas escuras, [fundos em gradiente escuro](https://gradiently.design/pt-br/guide/dark-gradient-backgrounds) 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.

## FAQ

### Como mudo um gradiente no modo escuro?

Coloque as cores do gradiente em propriedades personalizadas do CSS e redefina-as dentro de `@media (prefers-color-scheme: dark)`. O gradiente se atualiza onde usa essas variáveis.

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

Sim, em cada ponto de cor, já que o light-dark() devolve uma cor. Ele precisa de `color-scheme: light dark` no elemento ou em um ancestral.

### Por que meus gradientes parecem brilhantes demais no modo escuro?

Os olhos se adaptam a telas escuras, então cores saturadas parecem mais fortes. Reduza o chroma, escureça os pontos e limite a cor viva a áreas pequenas.

### O modo escuro deve usar preto puro?

Em geral não, para gradientes. Um quase preto tingido na direção do matiz da marca faz as cores se misturarem naturalmente e reduz o contraste agressivo.

### Por que meu gradiente escuro mostra listras?

Tons escuros ficam muito próximos em cor de 8 bits, então os degraus ficam visíveis. Acrescente uma camada leve de granulado e evite compressão pesada.