# Gradientes pretos: como desenhar com quase-preto

[Canonical HTML page](https://gradiently.design/pt-pt/guide/black-gradient)

O preto puro é um buraco no ecrã. Os gradientes pretos que parecem caros são feitos de quase-pretos com um pouco de cor lá dentro e uma luz que se move.

## The short version

- Um gradiente preto é uma mistura entre tons de quase-preto, ou do preto para uma cor, usada para dar profundidade aos designs escuros em vez de um vazio plano.
- Os melhores gradientes pretos evitam o #000000 puro e usam pretos com tom, que levam um pouco de matiz, como preto-azulado, café expresso quente ou beringela.
- Os gradientes escuros fazem bandas com facilidade porque há poucos níveis de brilho entre valores de quase-preto, por isso costumam precisar de grão ou de uma gama mais ampla.
- O texto corrido sobre um gradiente preto lê-se melhor num branco-sujo suave, e o texto secundário cinzento continua a precisar de um rácio de contraste de pelo menos 4,5:1.
- Os gradientes pretos servem lançamentos, luxo, música, vida noturna e produtos em modo escuro, onde o campo escuro faz uma cor de destaque brilhar.

Um **gradiente preto** é uma mistura que se move entre tons de quase-preto, ou do preto para uma cor, para que um design escuro tenha profundidade e luz em vez de um vazio plano. Os que parecem caros quase nunca usam `#000000` puro. Partem de um preto com tom, como `#0b0b10`, deixam a luminosidade mudar apenas uns pontos percentuais e juntam uma única fonte de cor ou de luz algures no campo.

Este guia dá-te pretos com tom, códigos de gradientes pretos para copiar, a solução para as bandas que assolam as misturas escuras e regras para o texto. Para fundos mais escuros em geral, vê os [fundos de gradiente escuros](https://gradiently.design/pt-pt/guide/dark-gradient-backgrounds); para o básico de como funcionam as misturas, começa por [o que é um gradiente](https://gradiently.design/pt-pt/guide/what-is-a-gradient).

## Porque é que o preto puro parece plano

O `#000000` não tem matiz nem sítio mais escuro para onde ir, por isso um design construído sobre ele não tem sombras, só uma ausência. Nada na vida real é tão preto: uma sala escura, um céu noturno e um tecido preto levam todos um vestígio de cor e uma lenta mudança de brilho. O teu olho lê essa mudança como profundidade.

- Preto puro: sem profundidade: `linear-gradient(180deg, #000000 0%, #000000 100%)`
- Quase-preto com tom: profundidade: `linear-gradient(180deg, #1a1a22 0%, #0b0b10 55%, #060609 100%)`

Lado a lado, a versão com tom lê-se como uma superfície onde cai luz. O preto puro lê-se como uma lacuna.

Há também uma razão prática. Nos ecrãs OLED, os píxeis de preto puro desligam-se por completo e, em alguns telemóveis, demoram um instante a voltar a ligar, o que pode deixar um breve rasto quando o conteúdo escuro se desloca. Elevar o valor mais escuro uns passos acima de zero evita isso e não te custa nada visualmente.

## Pretos com tom: as cores dentro de um bom preto

Um preto com tom é uma cor muito escura com um pouco de saturação por dentro. Em termos de HSL, mantém a luminosidade entre cerca de 4% e 9% e deixa a saturação em qualquer ponto entre 15% e 40%. O matiz decide o ambiente: os pretos azulados parecem técnicos e frios, os castanhos quentes parecem couro e café, e a beringela parece entardecer.

- Tinta: #0b0b10
- Preto-marinho: #0a0e17
- Preto-floresta: #0b120f
- Preto-beringela: #120b14
- Expresso: #14100d
- Grafite: #161618

Seis pretos com tom. Sozinhos parecem quase idênticos; lado a lado e ao lado de cor, as suas temperaturas revelam-se.

Se trabalhas em OKLCH, os números são mais fáceis de raciocinar: luminosidade à volta de 15% a 20% e croma entre 0,005 e 0,025. A Tinta acima é `oklch(15.2% 0.011 285)`, um preto com um sopro de azul. O nosso guia dos [códigos de cor](https://gradiently.design/pt-pt/guide/color-codes-explained) explica como ler estes valores.

## Códigos de gradientes pretos que podes copiar

Cada um destes mantém o valor mais escuro acima do preto puro e muda a luminosidade com suavidade. Usa-os como fundos completos, cabeçalhos ou bases de diapositivos e escolhe aquele cuja temperatura combina com a tua cor de destaque.

- Queda de tinta: `linear-gradient(180deg, #1c1c24 0%, #0b0b10 60%, #070709 100%)`
- Foco preto-azulado: `radial-gradient(120% 80% at 50% 0%, #1b2233 0%, #0a0e17 60%, #050608 100%)`
- Expresso quente: `linear-gradient(180deg, #221b16 0%, #14100d 55%, #0a0806 100%)`
- Brilho de grafite: `linear-gradient(135deg, #0e0e10 0%, #2a2a2e 50%, #0e0e10 100%)`
- Do preto ao violeta: `linear-gradient(160deg, #050507 0%, #12101c 55%, #2a1b4a 100%)`
- Do preto à brasa: `linear-gradient(200deg, #0a0706 0%, #1d0d08 50%, #5a1a0c 100%)`
- Preto e dourado: `linear-gradient(135deg, #0b0906 0%, #1c160c 60%, #6b5320 100%)`
- Verde-azulado da meia-noite: `linear-gradient(180deg, #03080a 0%, #08171b 55%, #0f3036 100%)`

Oito gradientes pretos, todos copiáveis. Os primeiros quatro ficam perto do neutro; os últimos quatro deixam uma cor subir da escuridão.

A direção importa mais no preto do que em qualquer outro sítio, porque há muito pouco mais a acontecer. A luz a cair de cima lê-se como natural e calma. A luz a subir de um canto inferior lê-se como um brilho, como um ecrã ou uma chama, e atrai o olhar para esse canto. Para mais sobre isto, vê os [ângulos de gradientes](https://gradiently.design/pt-pt/guide/gradient-angle).

## Gradientes do preto para uma cor

Os gradientes pretos mais marcantes deixam uma cor emergir da escuridão. Duas regras mantêm-nos ricos. Primeiro, não dês à cor mais de um terço do campo, para que o preto continue a ser a nota principal. Segundo, escurece a cor até ao preto ao longo do seu próprio matiz em vez de a esbater através do cinzento: um violeta deve passar por um índigo profundo a caminho do fundo, não pelo carvão. Um meio cinzento é a causa mais comum dos [gradientes turvos](https://gradiently.design/pt-pt/guide/muddy-gradients).

Brilho violeta a partir do preto: `radial-gradient(90% 70% at 80% 100%, #7c3aed 0%, #3b1d6e 30%, #140d24 60%, #08070c 100%)`

O violeta passa por ametista profunda e ameixa a caminho do preto, para que a queda se mantenha colorida e não cinzenta.

Os navegadores modernos podem fazer parte disto por ti. Interpolar em OKLCH mantém viva a croma da cor nas paragens mais escuras, e uma linha de recurso simples cobre os navegadores mais antigos.

```css
.hero {
  /* Fallback for browsers without colour interpolation */
  background: linear-gradient(160deg, #08070c 0%, #140d24 55%, #7c3aed 100%);
  /* Blends through oklch, so the violet stays violet as it darkens */
  background: linear-gradient(in oklch 160deg, #08070c 0%, #140d24 55%, #7c3aed 100%);
}
```

A segunda declaração vence onde `in oklch` é suportado e é ignorada nos outros.

## Como evitar as bandas em gradientes escuros

Os ecrãs costumam mostrar 256 níveis por canal de cor. Um gradiente de `#0a0a0a` a `#1a1a1a` só tem 16 desses níveis com que trabalhar, por isso, num cabeçalho de 1920 píxeis de largura, cada degrau tem cerca de 120 píxeis e vês riscas. São as [bandas em gradientes](https://gradiently.design/pt-pt/guide/gradient-banding), e os gradientes escuros sofrem-nas mais.

### Causa bandas

- Uma gama de luminosidade longa e muito estreita, como de #0a0a0a a #1a1a1a
- Cinzentos perfeitamente neutros, em que os três canais mudam no mesmo ponto
- Exportar um gradiente escuro como JPEG comprimido
- Esticar uma pequena imagem de gradiente por um ecrã grande

### Resolve

- Uma camada leve de grão ou ruído sobre o gradiente
- Um ligeiro matiz, para que os canais vermelho, verde e azul mudem em pontos diferentes
- Exportar em tamanho real como PNG, ou desenhar o gradiente ao vivo em CSS
- Uma gama de luminosidade mais ampla, ou uma distância mais curta para a mistura

O grão é a solução mais fiável, porque quebra a aresta dura de cada degrau em textura que o olho volta a misturar. Uns poucos por cento de opacidade chegam. Os [gradientes com grão](https://gradiently.design/pt-pt/guide/grainy-gradients) tratam do visual em profundidade; este é o CSS mínimo.

```css
.hero {
  position: relative;
  background: linear-gradient(180deg, #1c1c24 0%, #0b0b10 60%, #070709 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
```

Uma camada de ruído SVG a 8% de opacidade esconde os degraus num gradiente escuro sem parecer suja.

## Texto e cor sobre um gradiente preto

Os fundos pretos fazem quase qualquer texto claro passar no contraste, por isso o risco passa para o texto secundário. Os cinzentos médios que parecem bem num monitor luminoso podem ficar abaixo do mínimo de 4,5:1 para texto corrido. O branco puro também tem um custo: alguns leitores acham o branco vivo sobre quase-preto agressivo em passagens longas, por isso um branco-sujo quente é mais simpático e continua a ler-se com nitidez. Vê o [contraste de cor](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) para as regras completas.

| Cor do texto | Contraste sobre #0b0b10 | Usar em |
| --- | --- | --- |
| Branco `#ffffff` | 19,6:1 | Títulos curtos |
| Branco-sujo quente `#f2efe9` | 17,1:1 | Títulos e texto corrido |
| Cinzento claro `#a1a1aa` | 7,7:1 | Texto secundário |
| Cinzento médio `#8a8a93` | 5,7:1 | Legendas e etiquetas |
| Cinzento esbatido `#6b6b75` | 3,7:1 | Só texto grande, 24 px ou mais |
| Carvão `#4a4a52` | 2,2:1 | Decoração, nunca palavras |

Rácios de contraste calculados com a fórmula WCAG contra o preto Tinta. Tudo abaixo de 4,5:1 é demasiado ténue para texto corrido normal.

Uma publicação vertical com as palavras Depois de escurecer em branco-sujo sobre um gradiente quase preto, profundo e com luz suave

Um campo de quase-preto, uma linha de branco-sujo quente e um único destaque: o layout clássico do gradiente preto.

## Onde funcionam melhor os gradientes pretos

- **Lançamentos e revelações**, onde um campo escuro faz um produto ou um título parecerem iluminados
- **Luxo, fragrâncias e joalharia**, combinados com um destaque metálico como `#c9a96e`
- **Música, vida noturna e eventos**, com uma cor saturada a subir de um canto
- **Produtos de tecnologia e para programadores**, onde os pretos azulados parecem precisos
- **Interfaces em modo escuro**, com dois ou três pretos com tom como camadas de superfície
- **Portfólios de fotografia**, onde uma moldura preta calma deixa as imagens carregar a cor

Na Gradiently, o Mercado permite pesquisar Marks por palavras de cor como "quase preto" ou "preto e dourado", e cada Mark já traz grão e luz, por isso os problemas de bandas e de planura acima ficam tratados antes de começares.

## FAQ

### Qual é o melhor código hex para um gradiente preto?

Parte de um quase-preto com tom como `#0b0b10` (preto azulado) ou `#14100d` (café expresso quente) em vez de `#000000`, e deixa a paragem mais clara uns passos acima, como `#1c1c24`.

### Porque é que o meu gradiente preto tem riscas?

Os valores de quase-preto têm muito poucos níveis de brilho entre si, por isso cada degrau torna-se uma banda visível. Acrescenta uma camada leve de grão, dá aos pretos um ligeiro matiz ou alarga a gama de luminosidade.

### Que cor de texto fica melhor sobre um gradiente preto?

Um branco-sujo quente como `#f2efe9` lê-se com nitidez e parece mais suave do que o branco puro. Mantém o texto secundário cinzento com um contraste de 4,5:1 ou mais.

### Como faço um gradiente do preto para uma cor que não fique turvo?

Escurece a cor ao longo do seu próprio matiz a caminho do preto, por exemplo o violeta por um índigo profundo, em vez de a esbater através do cinzento. Interpolar em OKLCH em CSS ajuda.

### Um gradiente preto é bom para o modo escuro?

Sim, se for subtil. As superfícies do modo escuro funcionam melhor como dois ou três pretos com tom a poucos pontos percentuais de distância, com qualquer gradiente visível limitado a grandes áreas de fundo.