Fundos com gradiente escuro: profundidade sem tristeza

Um bom fundo com gradiente escuro é um quase preto com tom e uma cor a brilhar a partir dele, como se houvesse uma única luz acesa num quarto às escuras. O tom dá profundidade aos pretos, a cor iluminada dá ao olhar um sítio para onde ir e a grande área escura faz o texto branco parecer nítido. Sem estas três coisas, um gradiente escuro parece apenas um ecrã fraco.

Começa com um quase preto com tom

O preto puro #000000 é um beco sem saída: não há de onde misturar, e qualquer cor ao lado parece colada. Um quase preto com um toque de matiz dá ao gradiente uma família a que pertencer. Os pretos azulados parecem frios e técnicos, os pretos violeta parecem luxuosos, os pretos esverdeados parecem naturais e os castanhos quentes fazem lembrar couro e madeira. Escolhe o tom que combina com a cor que vais iluminar.

Junta uma cor iluminada

A cor iluminada é o que transforma a escuridão em atmosfera. Coloca-a fora do centro, normalmente perto de uma margem ou de um canto, para que pareça uma fonte de luz. Mantém-na na mesma família do tom: luz violeta sobre preto violeta, verde-azulado sobre preto azulado. Uma só cor quase sempre chega. Duas podem funcionar se forem vizinhas. Mais do que isso começa a parecer uma discoteca, o que é ótimo se estás a desenhar para uma; vê os gradientes néon.

Porque alguns gradientes escuros parecem tristes

O erro mais comum é misturar a cor iluminada em direção ao cinzento a caminho do preto. Mantém a croma alta à medida que escurece: o violeta deve tornar-se violeta mais profundo, depois preto violeta, nunca cinzento. Misturar em OKLCH ajuda; os gradientes lamacentos explicam porquê.

Faixas: o maior risco do gradiente escuro

Os gradientes escuros ocupam só uma pequena gama de valores, muitas vezes uma dúzia ou duas por canal, e as pessoas são muito sensíveis a pequenos degraus entre tons escuros. Por isso uma rampa escura suave por um ecrã inteiro é a receita perfeita para riscas visíveis. Três hábitos evitam-no: dar à rampa gama suficiente, juntar grão fino e exportar sem compressão forte. O pormenor está em faixas em gradientes e gradientes com grão.

Texto sobre um gradiente escuro

Os fundos escuros são generosos com a tipografia, mas só nas zonas escuras. Mantém as palavras longe da cor iluminada, onde o contraste desce. Usa branco-sujo em vez de branco puro em passagens longas, porque o branco puro sobre quase preto pode encadear. E mede: a WCAG pede pelo menos 4,5:1 para texto corrido e 3:1 para texto grande, o que podes verificar com o verificador de contraste da WebAIM.

Onde os fundos com gradiente escuro funcionam melhor

Os gradientes escuros servem tudo o que acontece à noite, tem ar premium ou precisa que a cor brilhe: música e eventos, cinema e jogos, lançamentos de tecnologia, perfumaria e bebidas espirituosas, e portefólios em que o trabalho deve ser a coisa mais brilhante da página. Ajudam também na fotografia de produto, porque um objeto iluminado sobre fundo escuro parece precioso.

• Capas e cartazes: um fundo escuro faz de um único título brilhante o protagonista
• Stories e Reels: os ecrãs cheios escuros têm ar de cinema no telemóvel
• Diapositivos: texto claro sobre escuro é mais calmo numa sala com pouca luz do que texto escuro sobre branco
• Cabeçalhos de sites: um cabeçalho escuro faz o primeiro ecrã parecer deliberado; vê os fundos para cabeçalhos de sites

Servem menos onde as pessoas leem muito tempo em papel, ou onde uma marca se constrói sobre a luz do dia, o frescor ou o jogo. Aí, um fundo claro com uma cor suave faz o mesmo trabalho.

Um fundo com 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 estás a desenhar uma interface inteira em modo escuro e não um só fundo, vê o design em modo escuro. Muitos Marks do Mercado assentam em fundos escuros e abrem espaço para as tuas palavras automaticamente, movendo a sua zona mais calma para trás do texto.