# Gradientes moody: códigos escuros e ricos com atmosfera

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

Escuro é fácil. Atmosfera é mais difícil: vem de onde cai a luz, da cor que seguras e do que fazem as sombras. Doze códigos e o raciocínio por trás deles.

## The short version

- Um gradiente moody é uma mistura escura em que a maior parte do quadro fica na sombra e a cor só aparece onde cai a luz.
- Os gradientes moody usam cores suaves, ligeiramente acinzentadas, em vez de saturadas, e é por isso que parecem cinematográficos e não berrantes.
- Sombras com um toque de cor, como preto-azulado ou preto-ameixa, parecem mais ricas do que o preto puro.
- Uma só luz quente contra um fundo frio é a forma mais rápida de dar atmosfera a um gradiente escuro.
- Os gradientes escuros fazem mais banding do que os claros, por isso junta um pouco de grão e exporta em PNG ou em vídeo de alta qualidade.

Um **gradiente moody** é uma mistura escura que se comporta como uma sala pouco iluminada: a maior parte do quadro fica na sombra, uma zona apanha a luz e as cores são contidas, não forçadas. A receita é simples de dizer. Começa com um quase preto tingido, junta um ou dois tons médios suaves e deixa uma única luz, muitas vezes quente contra um fundo frio, dar vida à superfície. Abaixo ficam doze códigos que podes copiar, depois como criar os teus e manter as palavras legíveis por cima.

## O que torna um gradiente moody, e não apenas escuro

Muitos gradientes escuros parecem planos. Um azul-marinho a esbater para preto é escuro, mas não tem clima. A atmosfera vem de algumas decisões que fotógrafos e coloristas de cinema tomam por instinto e que tu podes tomar de propósito.

- **Tom baixo.** Cerca de três quartos do quadro estão na sombra. A luz é a exceção, não a regra.
- **Uma só fonte.** A luz entra por um canto ou bordo, para que o olho saiba onde está a janela ou o candeeiro.
- **Cor contida.** Os tons médios são ligeiramente acinzentados. Um azul-petróleo empoeirado parece mais moody do que um vivo.
- **Sombras coloridas.** O ponto mais escuro é preto-azulado, preto-esverdeado ou bordeaux, nunca `#000000`.
- **Contraste de temperatura.** Uma pequena luz quente numa cena fria, ou o inverso, cria tensão.

### Escuro mas plano

- Preto puro numa das pontas
- Acento vivo e saturado
- Luz espalhada por igual no quadro
- Diagonal reta, de canto a canto
- Superfície digital perfeitamente lisa

### Moody

- Sombra tingida que ainda tem tom
- Acento suave, ligeiramente acinzentado
- Luz concentrada num só sítio
- Queda radial ou angular suave
- Grão fino, como película

## Doze códigos de gradientes moody

Cada um destes é um único valor CSS que podes colar em `background`. Estão agrupados de forma solta por temperatura: primeiro os frios e tempestuosos, depois os quentes, à luz de candeeiro, e por fim alguns intermédios.

- Tempestade: `linear-gradient(160deg, #2c3a4a 0%, #1b2330 45%, #0d1117 100%)`
- Petróleo da meia-noite: `radial-gradient(ellipse at 70% 30%, #1f5c63 0%, #0f2e36 45%, #050f14 90%)`
- Mar profundo: `linear-gradient(200deg, #10314a 0%, #0a1a2f 50%, #04080f 100%)`
- Floresta ao anoitecer: `linear-gradient(180deg, #2f4a3a 0%, #17291f 50%, #070d0a 100%)`
- Bordeaux: `radial-gradient(circle at 30% 20%, #6b1d2a 0%, #3a0f18 45%, #120609 85%)`
- Última brasa: `radial-gradient(circle at 80% 85%, #b4532a 0%, #4a1d12 35%, #120806 75%)`
- À luz de vela: `radial-gradient(circle at 50% 100%, #8a4b22 0%, #3d2115 40%, #0f0a08 80%)`
- Candeeiro de rua: `radial-gradient(circle at 20% 15%, #c98a3a 0%, #4b3220 30%, #14110f 70%)`
- Ameixa pisada: `linear-gradient(135deg, #3b1f3f 0%, #241329 50%, #0e0710 100%)`
- Tinta e violeta: `radial-gradient(circle at 75% 20%, #4c2a7a 0%, #1d1433 45%, #0a0812 85%)`
- Musgo e bronze: `linear-gradient(150deg, #0c120d 0%, #2a3320 55%, #7a5a2e 100%)`
- Rosa grafite: `linear-gradient(170deg, #4a3438 0%, #2b2628 55%, #161214 100%)`

Doze gradientes moody. Repara que nenhum termina em preto puro e nenhum usa uma cor totalmente saturada.

Se queres algo mais próximo de uma noite limpa do que de uma tempestade, os [gradientes de céu noturno](https://gradiently.design/pt-pt/guide/night-sky-gradient) puxam mais ao azul e acrescentam estrelas. Para cores mais profundas e brilhantes, com mais saturação, os [tons de joia](https://gradiently.design/pt-pt/guide/jewel-tone-colors) ficam um passo acima de tudo o que está aqui.

## Uma paleta de cores moody para começar

Quando fizeres os teus, trabalha a partir de uma paleta e não de duas cores. Cinco chegam: um fundo, dois degraus de sombra, um tom médio suave e uma luz. A luz é a única cor a quem se permite algum brilho a sério, e deve aparecer numa área pequena.

- Fundo de noite: #0d1117
- Ardósia profunda: #1b2330
- Tempestade: #2c3a4a
- Cinzento chuva: #5b6b78
- Âmbar de candeeiro: #c98a3a

Uma paleta fria e chuvosa com uma luz quente. Troca o âmbar por um rosa empoeirado ou por um amarelo-sódio pálido e a história muda por completo.

A razão pela qual a luz quente funciona tão bem contra a sombra fria é explicada na [temperatura de cor](https://gradiently.design/pt-pt/guide/color-temperature). Para mais conjuntos prontos, vê as [paletas de cores escuras](https://gradiently.design/pt-pt/guide/dark-color-palettes).

## Como fazer um gradiente moody em CSS

1. **Define um fundo tingido** Escolhe um quase preto com tom, como `#0b0d12` para preto-azulado ou `#120806` para preto-acastanhado quente. Usa-o também como alternativa em `background-color`.
2. **Junta o corpo da sombra** Põe um gradiente linear suave entre dois degraus escuros do mesmo tom. Isto dá profundidade ao quadro antes de a luz chegar.
3. **Coloca uma luz** Junta um gradiente radial num canto que esbate para `transparent` por volta dos 40 por cento. Mantém a cor suave e a opacidade bem abaixo do máximo.
4. **Junta uma contraluz fria** Opcionalmente, um segundo radial, maior e mais ténue, no canto oposto, na família fria. Impede que o lado da sombra fique morto.
5. **Termina com grão** Uma camada fina de ruído com baixa opacidade esconde o banding e faz a superfície parecer película. Os [gradientes com grão](https://gradiently.design/pt-pt/guide/grainy-gradients) têm o código.

```css
.moody {
  background-color: #0b0d12; /* tinted ground and fallback */
  background-image:
    radial-gradient(circle at 78% 18%, rgba(201, 138, 58, 0.5) 0%, transparent 40%),
    radial-gradient(ellipse at 10% 100%, rgba(31, 58, 68, 0.8) 0%, transparent 55%),
    linear-gradient(165deg, #151a22 0%, #0b0d12 100%);
}
```

Um brilho de candeeiro de rua no canto superior direito, uma névoa azul-petróleo fria no canto inferior esquerdo e um corpo de ardósia. Três camadas, sem imagens.

> **As misturas escuras fazem banding** Com tão pouca amplitude entre os valores mais escuros e mais claros, os gradientes moody mostram degraus em muitos ecrãs e após compressão. Grão, exportações em PNG e evitar definições fortes de qualidade JPEG ajudam. O [banding em gradientes](https://gradiently.design/pt-pt/guide/gradient-banding) explica a solução em pormenor.

## Pôr palavras sobre um fundo moody

O texto claro sobre fundo escuro lê-se bem, até atravessar a única poça de luz em que tanto trabalhaste. Planeia o título para o lado da sombra e mantém a luz longe das palavras, não por trás delas. Um branco suave quebrado, como `#ece6dc`, assenta mais confortavelmente num fundo moody do que o branco puro, que pode parecer duro.

Um story vertical escuro de evento em que a zona de luz do fundo fica por trás do título O último espetáculo

O fundo atravessa as palavras, por isso a zona mais brilhante pode cair por trás do título.

O mesmo story escuro de evento com uma sombra calma por trás do título e o brilho mantido num dos bordos

Aqui o Mark move a sua região mais calma e escura para trás do texto, e a luz fica no bordo.

Essa versão da direita é o que um Mark do Gradiently faz sozinho: sabe onde estão as palavras, aprofunda a cor junto às letras e escolhe texto claro ou escuro por linha a partir da sua própria paleta, sem caixas nem sombras acrescentadas. O [texto sobre gradiente](https://gradiently.design/pt-pt/guide/text-on-gradient) trata da versão manual.

## Onde funcionam melhor os gradientes moody

| Uso | Experimenta | Tamanho |
| --- | --- | --- |
| Story de evento tardio ou noite de clube | Tinta e violeta, Candeeiro de rua | 1080×1920 |
| Capa de podcast | Bordeaux, Rosa grafite | 3000×3000 |
| Cartaz de ementa de restaurante ou bar | À luz de vela, Musgo e bronze | A4, 2480×3508 |
| Topo de site para um estúdio ou agência | Tempestade, Petróleo da meia-noite | 1920×1080 |
| Miniatura de YouTube para um thriller ou ensaio | Última brasa, Mar profundo | 1280×720 |
| Capa de playlist do Spotify | Floresta ao anoitecer, Ameixa pisada | 1080×1080 |

Os gradientes moody assentam a tudo o que acontece à noite, a tudo o que quer parecer ponderado e a tudo o que deve ser ouvido e não gritado.

Assentam à noite, à música, à bebida, ao cinema, à perfumaria e ao luxo discreto. Assentam muito menos a uma festa de crianças ou a uns saldos de verão. Para uma interface inteira neste registo, os [fundos de gradiente escuros](https://gradiently.design/pt-pt/guide/dark-gradient-backgrounds) tratam do cuidado extra que os ecrãs exigem.

Se preferes não afinar camadas à mão, o Mercado tem Marks vivos exatamente neste registo, que se procuram com palavras como “azul-petróleo escuro” ou “bordeaux”. Podes desenhar com qualquer Mark por reservar gratuitamente, e reservar um significa que o cartaz de mais ninguém vai ter a mesma atmosfera.

## FAQ

### Que cores fazem um gradiente moody?

Quase pretos tingidos, como preto-azulado ou preto-ameixa, um ou dois tons médios suaves como azul-petróleo empoeirado ou ardósia, e uma única luz mais quente, como âmbar ou brasa.

### Em que difere um gradiente moody de um gradiente escuro?

Um gradiente escuro só precisa de ser escuro. Um moody tem uma fonte de luz clara, cor contida e sombras coloridas, que lhe dão atmosfera.

### Um gradiente moody deve usar preto puro?

Normalmente não. Um quase preto com um toque de tom, como `#0b0d12`, parece mais rico e mistura-se melhor com as cores à volta.

### Porque é que o meu gradiente escuro parece às riscas?

Isso é banding, que se nota mais em misturas escuras e subtis. Junta grão fino e exporta em PNG ou em vídeo de alta qualidade em vez de um JPEG comprimido.

### Que cor de texto funciona num gradiente moody?

Um branco suave quebrado costuma ler-se melhor. Coloca-o sobre o lado da sombra, longe da zona mais brilhante, e verifica o contraste onde se encontra cada linha.