Fundos de gradiente escuros: profundidade sem tristeza

Um bom fundo de gradiente escuro é um quase-preto com tom e uma cor brilhando nele, como se uma única luz estivesse acesa num quarto escuro. O tom dá profundidade aos pretos, a cor iluminada dá ao olhar para onde ir, e a grande área escura faz o texto branco parecer nítido. Sem essas três coisas, um gradiente escuro parece só uma tela sem brilho.

Comece com um quase-preto com tom

O preto puro #000000 é um beco sem saída: não há de onde partir a mistura e qualquer cor ao lado dele parece colada. Um quase-preto com um traço de matiz dá ao gradiente uma família a que pertencer. Pretos azulados parecem frios e técnicos, pretos violeta parecem luxuosos, pretos esverdeados parecem naturais e marrons quentes lembram couro e madeira. Escolha o tom que combina com a cor que você pretende iluminar.

Acrescente uma cor iluminada

A cor iluminada é o que transforma a escuridão em atmosfera. Coloque-a fora do centro, em geral perto de uma borda ou de um canto, para que pareça uma fonte de luz. Mantenha-a na mesma família do tom: luz violeta sobre preto-violeta, verde-azulado sobre preto-azulado. Uma cor quase sempre basta. Duas podem funcionar se forem vizinhas. Mais que isso começa a parecer uma boate, o que é ótimo se você estiver criando para uma; veja os gradientes neon.

Por que alguns gradientes escuros parecem sombrios

O erro mais comum é misturar a cor iluminada rumo ao cinza no caminho para o preto. Mantenha a croma alta ao escurecer: o violeta deve virar um violeta mais profundo, depois preto-violeta, nunca cinza. Misturar em OKLCH ajuda; os gradientes sujos explicam o porquê.

Banding: o maior risco do gradiente escuro

Gradientes escuros cobrem só uma pequena faixa de valores, muitas vezes uma ou duas dúzias por canal, e as pessoas são muito sensíveis a pequenos degraus entre tons escuros. Por isso, uma rampa escura lisa numa tela inteira é a receita perfeita para listras visíveis. Três hábitos evitam isso: dar à rampa faixa suficiente, acrescentar grão fino e exportar sem compressão pesada. Os detalhes estão em banding em gradientes e gradientes com grão.

Texto sobre um gradiente escuro

Fundos escuros são generosos com o texto, mas só nas áreas escuras. Mantenha as palavras longe da cor iluminada, onde o contraste cai. Use off-white em vez de branco puro em trechos longos, porque o branco puro sobre quase-preto pode ofuscar. E meça: a WCAG pede pelo menos 4,5:1 para o texto corrido e 3:1 para o texto grande, o que você confere no verificador de contraste da WebAIM.

Onde os fundos de gradiente escuros funcionam melhor

Gradientes escuros combinam com tudo que acontece à noite, parece premium ou precisa que a cor brilhe: música e eventos, cinema e games, lançamentos de tecnologia, perfumes e destilados, e portfólios em que o trabalho deve ser a coisa mais brilhante da página. Também ajudam na fotografia de produto, porque um objeto iluminado sobre fundo escuro parece precioso.

• Capas e pôsteres: um fundo escuro faz um único título brilhante virar o protagonista
• Stories e Reels: quadros escuros em tela cheia parecem cinematográficos no celular
• Slides: texto claro sobre escuro é mais calmo numa sala de luz baixa do que texto escuro sobre branco
• Heróis de site: um herói escuro faz a primeira tela parecer intencional; veja os fundos de herói para sites

Combinam menos onde as pessoas leem por muito tempo no papel ou onde a marca se baseia em luz do dia, frescor ou brincadeira. Nesses casos, um fundo claro com uma cor suave faz o mesmo trabalho.

Um fundo de gradiente escuro em CSS

.dark-hero {
  background-color: #0b0f1a; /* fallback */
  background-image:
    radial-gradient(circle at 85% 15%, #1d4ed8 0%, transparent 45%),
    linear-gradient(180deg, #0b0f1a 0%, #0f172a 100%);
  color: #e5e7eb;
}

.dark-hero h1 {
  color: #ffffff;
}

Se você está criando uma interface inteira em modo escuro e não um só fundo, veja o design em modo escuro. Muitos Marks do Mercado são feitos sobre fundos escuros e abrem espaço para as suas palavras sozinhos, movendo a área mais calma para trás do texto.