# Degradês moody: códigos escuros e ricos, cheios de atmosfera

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

Escuro é fácil. Atmosfera é mais difícil: vem de onde a luz cai, de quanta cor você segura e do que as sombras têm dentro. Doze códigos e o raciocínio por trás deles.

## The short version

- Um degradê moody é uma mistura escura em que a maior parte do quadro fica na sombra e a cor aparece só onde a luz cai.
- Degradês moody usam cores apagadas, levemente acinzentadas, em vez de saturadas, e por isso parecem cinematográficos, não berrantes.
- Sombras com um toque de cor, como o preto azulado ou o preto ameixa, parecem mais ricas que o preto puro.
- Uma luz quente contra um fundo frio é o jeito mais rápido de dar atmosfera a um degradê escuro.
- Degradês escuros formam mais faixas que os claros, então acrescente um pouco de grão e exporte em PNG ou em vídeo de alta qualidade.

Um **degradê moody** é uma mistura escura que se comporta como uma sala pouco iluminada: a maior parte do quadro fica na sombra, uma área pega a luz e as cores são seguradas, não forçadas. A receita é simples de dizer. Comece com um quase preto tingido, acrescente um ou dois tons médios apagados e deixe uma única luz, muitas vezes quente contra um fundo frio, dar vida à superfície. Abaixo estão doze códigos para copiar e depois como criar os seus e manter as palavras legíveis por cima.

## O que torna um degradê moody, e não só escuro

Muitos degradês escuros parecem chapados. Azul-marinho que vira preto é escuro, mas não tem clima nenhum. O clima vem de algumas decisões que fotógrafos e coloristas de cinema tomam por instinto, e que você pode tomar de propósito.

- **Low key.** Mais ou menos três quartos do quadro ficam na sombra. A luz é a exceção, não a regra.
- **Uma só fonte.** A luz entra por um canto ou uma borda, então o olho sabe onde está a janela ou a lâmpada.
- **Cor contida.** Os tons médios são levemente acinzentados. Um azul-petróleo empoeirado parece mais moody que um vivo.
- **Sombras coloridas.** O ponto mais escuro é preto azulado, preto esverdeado ou sangue de boi, nunca `#000000`.
- **Contraste de temperatura.** Uma pequena luz quente numa cena fria, ou o contrário, cria tensão.

### Escuro, mas chapado

- Preto puro numa ponta
- Destaque vivo e saturado
- Luz espalhada por igual pelo quadro
- Diagonal reta, de canto a canto
- Superfície digital perfeitamente lisa

### Moody

- Sombra tingida que ainda tem matiz
- Destaque apagado, levemente acinzentado
- Luz concentrada num só lugar
- Queda radial ou angular suave
- Grão fino, como filme

## Doze códigos de degradê moody

Cada um destes é um único valor CSS que você pode colar em `background`. Estão agrupados de modo livre por temperatura: primeiro os frios e tempestuosos, depois os quentes, à luz de lamparina, e alguns intermediários.

- 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%)`
- Sangue de boi: `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%)`
- Poste de rua: `radial-gradient(circle at 20% 15%, #c98a3a 0%, #4b3220 30%, #14110f 70%)`
- Ameixa machucada: `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%)`
- Grafite rosado: `linear-gradient(170deg, #4a3438 0%, #2b2628 55%, #161214 100%)`

Doze degradês moody. Repare que nenhum termina em preto puro e nenhum usa uma cor totalmente saturada.

Se você quer algo mais próximo de uma noite clara do que de uma tempestade, os [degradês de céu noturno](https://gradiently.design/pt-br/guide/night-sky-gradient) puxam mais para o azul e acrescentam estrelas. Para uma cor mais profunda, brilhante e saturada, os [tons de joia](https://gradiently.design/pt-br/guide/jewel-tone-colors) ficam um passo acima de tudo isto.

## Uma paleta de cores moody para construir

Quando fizer os seus, trabalhe a partir de uma paleta, não de duas cores. Cinco bastam: um fundo, dois degraus de sombra, um tom médio apagado e uma luz. A luz é a única cor com direito a algum brilho de verdade, e deve aparecer numa área pequena.

- Fundo noturno: #0d1117
- Ardósia profunda: #1b2330
- Tempestade: #2c3a4a
- Cinza chuva: #5b6b78
- Âmbar de lampião: #c98a3a

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

O motivo de a luz quente funcionar tão bem contra a sombra fria é explicado em [temperatura de cor](https://gradiently.design/pt-br/guide/color-temperature). Para mais conjuntos prontos, veja [paletas de cores escuras](https://gradiently.design/pt-br/guide/dark-color-palettes).

## Como fazer um degradê moody em CSS

1. **Defina um fundo tingido** Escolha um quase preto com algum matiz, como `#0b0d12` para o preto azulado ou `#120806` para o preto amarronzado quente. Use-o também como alternativa em `background-color`.
2. **Acrescente o corpo da sombra** Aplique um degradê linear suave entre dois degraus escuros do mesmo matiz. Isso dá profundidade ao quadro antes de a luz chegar.
3. **Posicione uma luz** Acrescente um degradê radial num canto que se dissolva em `transparent` por volta dos 40 por cento. Mantenha a cor apagada e a opacidade bem abaixo do máximo.
4. **Acrescente uma contraluz fria** Opcionalmente, um segundo radial, maior e mais fraco, no canto oposto, na família fria. Ele impede que o lado da sombra fique morto.
5. **Finalize com grão** Uma camada de ruído fino em baixa opacidade esconde as faixas e faz a superfície parecer filme. [Degradês com grão](https://gradiently.design/pt-br/guide/grainy-gradients) traz 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%);
}
```

O brilho de um poste no canto superior direito, uma névoa azul-petróleo fria embaixo à esquerda e um corpo de ardósia. Três camadas, nenhuma imagem.

> **Misturas escuras formam faixas** Com tão pouca diferença entre os valores mais escuros e os mais claros, os degradês moody mostram faixas em degraus em muitas telas e depois da compressão. Grão, exportações em PNG e evitar configurações pesadas de qualidade JPEG ajudam. [Faixas em degradês](https://gradiently.design/pt-br/guide/gradient-banding) explica a solução em detalhe.

## Colocando palavras sobre um fundo moody

Texto claro sobre fundo escuro se lê bem, até cruzar a única poça de luz que deu tanto trabalho. Planeje o título para o lado da sombra e mantenha a luz longe das palavras, não atrás delas. Um off-white suave, como `#ece6dc`, fica mais confortável sobre um fundo moody do que o branco puro, que pode parecer duro.

Story vertical escuro de um evento em que a área clara do fundo fica atrás do título O show da madrugada

O fundo corre direto por baixo das palavras, então a área mais brilhante pode cair atrás do título.

O mesmo story escuro de evento, com uma sombra calma atrás do título e o brilho mantido numa borda

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

A versão da direita é o que um Mark da Gradiently faz sozinho: ele sabe onde estão as palavras, aprofunda a cor perto das letras e escolhe texto claro ou escuro por linha a partir da sua própria paleta, sem caixas nem sombras extras. [Texto sobre degradê](https://gradiently.design/pt-br/guide/text-on-gradient) trata da versão manual.

## Onde os degradês moody funcionam melhor

| Uso | Experimente | Tamanho |
| --- | --- | --- |
| Story de evento tarde da noite ou balada | Tinta e violeta, Poste de rua | 1080×1920 |
| Capa de podcast | Sangue de boi, Grafite rosado | 3000×3000 |
| Cartaz de cardápio de restaurante ou bar | Luz de vela, Musgo e bronze | A4, 2480×3508 |
| Destaque de site para um estúdio ou agência | Tempestade, Petróleo da meia-noite | 1920×1080 |
| Miniatura do YouTube para um thriller ou ensaio | Última brasa, Mar profundo | 1280×720 |
| Capa de playlist do Spotify | Floresta ao anoitecer, Ameixa machucada | 1080×1080 |

Degradês moody combinam com tudo o que acontece à noite, com tudo o que quer parecer pensado e com tudo que deve ser ouvido, não gritado.

Combinam com noite, música, bebida, cinema, perfume e luxo discreto. Combinam bem menos com uma festa infantil ou uma liquidação de verão. Para uma interface inteira nesse registro, [fundos em degradê escuro](https://gradiently.design/pt-br/guide/dark-gradient-backgrounds) trata do cuidado extra que as telas exigem.

Se você prefere não ajustar camadas à mão, o Mercado tem Marks vivos exatamente nesse registro, que podem ser buscados com palavras como “azul-petróleo escuro” ou “sangue de boi”. Você pode criar com qualquer Mark sem dono de graça, e reservar um significa que o cartaz de mais ninguém vai usar a mesma atmosfera.

## FAQ

### Quais cores formam um degradê moody?

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

### Qual é a diferença entre um degradê moody e um degradê escuro?

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

### Um degradê moody deve usar preto puro?

Em geral, não. Um quase preto com um toque de matiz, como `#0b0d12`, parece mais rico e se mistura de forma mais suave com as cores ao redor.

### Por que o meu degradê escuro parece listrado?

São faixas, que aparecem mais em misturas escuras e sutis. Acrescente grão fino e exporte em PNG ou em vídeo de alta qualidade, em vez de JPEG comprimido.

### Qual cor de texto funciona num degradê moody?

Um off-white suave costuma ler melhor. Coloque-o sobre o lado da sombra, longe da área mais brilhante, e confira o contraste onde cada linha fica.