# Gradientes monocromáticos: um tom, muitas sombras

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

Uma só cor, a mudar apenas de luminosidade: é o gradiente mais silencioso que existe e o que mostra todos os defeitos. Aqui ficam códigos que funcionam, o CSS que mantém o tom fiel e a solução para o banding.

## The short version

- Um gradiente monocromático mistura um só tom do escuro ao claro, ou vai do preto ao branco através de cinzentos.
- Um gradiente monocromático é uma só transição, enquanto um esquema de cores monocromático é uma paleta inteira construída a partir de um tom.
- Definir as paragens em oklch com um tom fixo impede que um gradiente de uma só cor derive para cinzento ou para outro tom.
- Os gradientes monocromáticos escuros são os que mais sofrem de banding, porque um ecrã de 8 bits tem muito poucos degraus distintos entre tons quase pretos.
- Uma camada leve de grão sobre um gradiente monocromático esconde o banding e faz com que pareça uma superfície.

Um **gradiente monocromático** mistura um só tom através das suas próprias sombras, do profundo ao claro, sem trazer uma segunda cor. Do preto ao branco através do cinzento é a versão mais pura; um azul-marinho que sobe até um azul pálido, ou uma beringela que se levanta até um lilás, também são gradientes monocromáticos. Parecem calmos e caros porque nada compete e, pela mesma razão, mostram todos os defeitos: banding, pontos médios turvos e um tom que desvia a meio. Os códigos e o CSS abaixo evitam os três.

Carvão a prata: `linear-gradient(180deg, #0a0a0a 0%, #2b2b2b 45%, #6e6e6e 80%, #b5b5b5 100%)`

Um gradiente preto e branco com as paragens concentradas na ponta escura, de modo que a maior parte do quadro fica profunda e a luz chega tarde.

## Gradiente monocromático vs esquema de cores monocromático

Os dois termos estão relacionados e confundem-se muitas vezes. Um [esquema de cores monocromático](https://gradiently.design/pt-pt/guide/monochromatic-color-scheme) é uma paleta: várias tintas, tons e sombras de um só tom usados num design inteiro. Um gradiente monocromático é uma única transição dentro dessa ideia. Podes usar um gradiente monocromático num design cuja paleta não é monocromática, como um fundo azul-escuro sob texto laranja.

| Aspeto | Gradiente monocromático | Esquema monocromático |
| --- | --- | --- |
| O que é | Uma transição contínua | Um conjunto de cores separadas |
| Onde vive | Um fundo, uma forma, um botão | Uma marca ou layout inteiro |
| Número de tons | Um | Um |
| Uso típico | Fundos de topo, cartões, cartazes | Interfaces, ilustração, identidade |

O mesmo princípio, outra escala. O gradiente é uma superfície; o esquema é um sistema.

## Códigos de gradiente monocromático para copiar

Cada um destes mantém um só tom e muda apenas a luminosidade e um pouco da saturação. As paragens mais escuras são ligeiramente mais saturadas do que as mais claras, que é como a cor real se comporta na sombra e a razão pela qual estes parecem naturais.

- Do preto ao branco: `linear-gradient(180deg, #000000 0%, #ffffff 100%)`
- Foco de grafite: `radial-gradient(circle at 50% 30%, #3a3a3a 0%, #161616 50%, #050505 100%)`
- Marinho a céu: `linear-gradient(160deg, #0a1a3f 0%, #1e40af 50%, #93c5fd 100%)`
- Pinho a menta: `linear-gradient(160deg, #052e1c 0%, #15803d 55%, #bbf7d0 100%)`
- Bordeaux a rosa-claro: `linear-gradient(160deg, #2a0a12 0%, #9f1239 55%, #fecdd3 100%)`
- Beringela a lilás: `linear-gradient(160deg, #1c0b33 0%, #6d28d9 55%, #ddd6fe 100%)`
- Terra a mel: `linear-gradient(160deg, #2b1a05 0%, #b45309 55%, #fde68a 100%)`
- Papel a pedra: `linear-gradient(180deg, #f7f5f2 0%, #d6d1ca 100%)`

Oito gradientes de uma só cor. Cada um mantém o seu tom de ponta a ponta.

Para a ponta escura desta família em separado, vê os [gradientes pretos](https://gradiently.design/pt-pt/guide/black-gradient) e os [gradientes cinzentos](https://gradiently.design/pt-pt/guide/grey-gradient). Para perceber como se relacionam os degraus, as [tintas, tons e sombras](https://gradiently.design/pt-pt/guide/tints-tones-shades) são a leitura de base.

## Como fazer um gradiente monocromático em CSS

A forma mais simples de manter um só tom é escrever as paragens em oklch e mudar apenas o primeiro número, a luminosidade. O ângulo do tom fica fixo, por isso a cor não se desvia, e o oklch distribui a luminosidade de forma uniforme, por isso a transição sobe a um ritmo constante. O [OKLCH explicado](https://gradiently.design/pt-pt/guide/oklch-explained) trata do formato.

```css
.hero {
  /* one hue (264, a deep blue), lightness only */
  background: linear-gradient(
    in oklch 170deg,
    oklch(0.18 0.08 264) 0%,
    oklch(0.42 0.16 264) 55%,
    oklch(0.86 0.06 264) 100%
  );
}

.mono {
  /* true greyscale: chroma 0 */
  background: linear-gradient(
    180deg,
    oklch(0.12 0 0) 0%,
    oklch(0.55 0 0) 100%
  );
}
```

Muda o número do tom (264) para levar todo o gradiente para outra cor. A croma desce na ponta clara, como acontece na luz real.

1. **Escolhe o tom** Escolhe uma cor e encontra o seu ângulo de tom. Um azul fica por volta de 260, um verde por volta de 145, um vermelho por volta de 25.
2. **Define as paragens mais escura e mais clara** Mantém a ponta escura acima do preto puro e a ponta clara abaixo do branco puro, a menos que queiras um limite duro. Uma luminosidade de 0,15 a 0,9 é uma gama confortável.
3. **Coloca a paragem do meio com intenção** Move-a para a ponta que queres que domine. Uma paragem do meio a 30 por cento dá um quadro sobretudo claro; a 70 por cento, sobretudo escuro. As [paragens de cor do gradiente](https://gradiently.design/pt-pt/guide/gradient-stops) mostram mais.
4. **Junta grão** Uma camada ténue de ruído sobre o gradiente esconde o banding e acrescenta uma sensação de material.

## Porque é que os gradientes monocromáticos escuros fazem banding

A maioria dos ecrãs mostra 256 níveis por canal. Um gradiente do preto `#000000` ao cinzento-escuro `#282828` tem apenas 40 degraus distintos com que trabalhar. Estica-o por um topo de 1920 píxeis de largura e cada degrau é uma faixa de 48 píxeis, que o olho distingue facilmente no escuro. Os gradientes multicolores escondem isto porque os canais mudam em momentos diferentes; um gradiente monocromático muda os três em conjunto, por isso as faixas alinham-se.

### Faixas

- De quase preto a cinzento-escuro num ecrã inteiro
- Compressão JPEG forte na exportação
- Superfície digital perfeitamente limpa
- Transição longa e de baixo contraste com poucas paragens

### Suave

- Uma gama de luminosidade mais ampla, ou uma distância mais curta
- PNG, ou uma definição de alta qualidade
- Uma camada leve de grão por cima
- Uma luz radial que muda mais depressa perto do centro

O [banding em gradientes](https://gradiently.design/pt-pt/guide/gradient-banding) e os [gradientes com grão](https://gradiently.design/pt-pt/guide/grainy-gradients) explicam a solução em pormenor, com código para uma camada de ruído em SVG.

## Onde funcionam os gradientes monocromáticos

Como levam uma só cor, os gradientes monocromáticos deixam o texto e a fotografia liderar. Assentam a lançamentos de produtos de luxo, estúdios de arquitetura, edições de música e qualquer marca cuja identidade seja uma só cor. Compõe as palavras na ponta mais clara ou mais escura do mesmo tom, ou em branco ou preto, e o design lê-se como uma só decisão confiante.

Se precisas de um acento, vai buscá-lo fora do tom e usa-o uma só vez: uma única data laranja sobre um gradiente marinho, ou um preço vermelho sobre grafite. O gradiente continua monocromático e o acento fica com toda a atenção porque mais nada compete por ela.

Uma capa de álbum quadrada em tons de preto e carvão profundos com uma única palavra em letras pálidas

Uma capa de edição quadrada a 1080×1080, quase toda sombra, com a luz a subir num dos bordos.

Um topo de site largo para um estúdio de arquitetura sobre um gradiente escuro de uma só cor

Um topo de site a 1920×1080: a mesma abordagem calma, de uma só cor, num quadro muito mais largo.

No Gradiently, um fundo monocromático também pode mover-se: um Mark desenha a sua luz em direto, por isso um gradiente de uma só cor pode deslizar devagar por trás das palavras e, com o Pro, exporta-se como loop contínuo em todos os tamanhos que desenhares.

## FAQ

### O que é um gradiente monocromático?

Um gradiente que mistura um só tom através das suas próprias sombras, do escuro ao claro, ou que vai do preto ao branco através de cinzentos.

### Um gradiente monocromático é o mesmo que um esquema de cores monocromático?

Não. Um esquema monocromático é uma paleta de um só tom usada num design; um gradiente monocromático é uma transição contínua de um só tom.

### Como faço um gradiente de uma só cor em CSS?

Escreve as paragens em oklch e muda apenas a luminosidade, por exemplo de `oklch(0.18 0.08 264)` a `oklch(0.86 0.06 264)`. O tom fica fixo, por isso a cor não se desvia.

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

Os tons escuros têm muito poucos degraus distintos num ecrã de 8 bits, por isso a transição mostra faixas. Junta uma camada leve de grão, alarga a gama de luminosidade ou exporta em PNG.

### Qual é o código de um gradiente preto e branco?

`linear-gradient(180deg, #000000 0%, #ffffff 100%)` é a versão simples. Para um aspeto mais rico, concentra as paragens na ponta escura e pára antes do branco puro.