Gradientes moody: códigos escuros e ricos com atmosfera

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.

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.

Se queres algo mais próximo de uma noite limpa do que de uma tempestade, os gradientes de céu noturno puxam mais ao azul e acrescentam estrelas. Para cores mais profundas e brilhantes, com mais saturação, os tons de joia 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.

A razão pela qual a luz quente funciona tão bem contra a sombra fria é explicada na temperatura de cor. Para mais conjuntos prontos, vê as paletas de cores escuras.

Como fazer um gradiente moody em CSS

1. 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. 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. 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. 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. 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 têm o código.

.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%);
}

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.

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 trata da versão manual.

Onde funcionam melhor os gradientes moody

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