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

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.

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.

Se você quer algo mais próximo de uma noite clara do que de uma tempestade, os degradês de céu noturno puxam mais para o azul e acrescentam estrelas. Para uma cor mais profunda, brilhante e saturada, os tons de joia 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.

O motivo de a luz quente funcionar tão bem contra a sombra fria é explicado em temperatura de cor. Para mais conjuntos prontos, veja paletas de cores escuras.

Como fazer um degradê moody em CSS

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

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.

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

Onde os degradês moody funcionam melhor

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