# Degradê monocromático: um só matiz, muitos tons

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

Uma só cor, mudando apenas de luminosidade: é o degradê mais discreto que existe e o que mostra todos os defeitos. Veja códigos que funcionam, o CSS que mantém o matiz fiel e a solução para as faixas.

## The short version

- Um degradê monocromático mistura um único matiz do escuro ao claro, ou vai do preto ao branco passando por cinzas.
- Um degradê monocromático é uma mistura só, enquanto um esquema de cores monocromático é uma paleta inteira construída a partir de um matiz.
- Definir as paradas em oklch com um matiz fixo impede que um degradê de uma cor derive para o cinza ou para outro matiz.
- Degradês monocromáticos escuros formam mais faixas, porque uma tela de 8 bits tem pouquíssimos degraus distintos entre tons quase pretos.
- Uma camada leve de grão sobre um degradê monocromático esconde as faixas e o faz parecer uma superfície.

Um **degradê monocromático** mistura um matiz pelos seus próprios tons, do profundo ao claro, sem trazer uma segunda cor. Do preto ao branco, passando pelo cinza, é a versão mais pura; um azul-marinho que sobe até um azul pálido, ou uma berinjela que clareia até um lilás, também são degradês monocromáticos. Parecem calmos e sofisticados porque nada compete e, pelo mesmo motivo, mostram todos os defeitos: faixas, meios-tons turvos e um matiz que se desvia no meio do caminho. 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 degradê preto e branco com as paradas concentradas no lado escuro, para que a maior parte do quadro fique profunda e a luz chegue tarde.

## Degradê monocromático vs esquema de cores monocromático

Os dois termos são parentes e muitas vezes confundidos. Um [esquema de cores monocromático](https://gradiently.design/pt-br/guide/monochromatic-color-scheme) é uma paleta: vários tons claros, médios e escuros de um matiz, usados num design inteiro. Um degradê monocromático é uma única mistura dentro dessa ideia. Você pode usar um degradê monocromático num design cuja paleta não é monocromática de modo algum, como um fundo azul-escuro sob texto laranja.

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

Mesmo princípio, escala diferente. O degradê é uma superfície; o esquema é um sistema.

## Códigos de degradê monocromático para copiar

Cada um destes mantém um único matiz e muda apenas a luminosidade e um pouco da saturação. As paradas mais escuras são ligeiramente mais saturadas que as claras, que é como a cor real se comporta na sombra e por isso estes parecem naturais.

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

Oito degradês de uma só cor. Cada um permanece no seu próprio matiz de ponta a ponta.

Para o lado escuro desta família isoladamente, veja [degradês pretos](https://gradiently.design/pt-br/guide/black-gradient) e [degradês cinza](https://gradiently.design/pt-br/guide/grey-gradient). Para entender como os degraus se relacionam, [tons claros, médios e escuros](https://gradiently.design/pt-br/guide/tints-tones-shades) é a leitura de base.

## Como fazer um degradê monocromático em CSS

O jeito mais simples de manter um só matiz é escrever as paradas em oklch e mudar apenas o primeiro número, a luminosidade. O ângulo do matiz fica fixo, então a cor não pode se desviar, e o oklch distribui a luminosidade de modo uniforme, então a mistura sobe em ritmo constante. [OKLCH explicado](https://gradiently.design/pt-br/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%
  );
}
```

Mude o número do matiz (264) para levar o degradê inteiro a outra cor. A saturação cai na ponta clara, como acontece na luz real.

1. **Escolha o matiz** Escolha uma cor e descubra o ângulo do seu matiz. Um azul fica por volta de 260, um verde por volta de 145, um vermelho por volta de 25.
2. **Defina as paradas mais escura e mais clara** Mantenha a ponta escura acima do preto puro e a clara abaixo do branco puro, a menos que queira uma borda dura. Uma luminosidade de 0,15 a 0,9 é uma faixa confortável.
3. **Posicione a parada do meio com intenção** Mova-a para a ponta que você quer que domine. Uma parada do meio em 30 por cento dá um quadro mais claro; em 70 por cento, mais escuro. [Paradas de cor do degradê](https://gradiently.design/pt-br/guide/gradient-stops) mostra mais.
4. **Acrescente grão** Uma camada leve de ruído sobre o degradê esconde as faixas e dá uma sensação de material.

## Por que degradês monocromáticos escuros formam faixas

A maioria das telas mostra 256 níveis por canal. Um degradê do preto `#000000` ao cinza-escuro `#282828` tem só 40 degraus distintos para trabalhar. Estique-o por um destaque de 1920 pixels de largura e cada degrau vira uma faixa de 48 pixels, que o olho percebe com facilidade no escuro. Degradês de várias cores escondem isso porque os canais mudam em momentos diferentes; um degradê monocromático muda os três juntos, então as faixas se alinham.

### Forma faixas

- De quase preto a cinza-escuro numa tela inteira
- Compressão JPEG pesada na exportação
- Superfície digital perfeitamente limpa
- Uma mistura longa, de baixo contraste, com poucas paradas

### Fica suave

- Uma faixa de luminosidade maior, ou uma distância menor
- PNG, ou uma configuração de alta qualidade
- Uma camada leve de grão por cima
- Uma luz radial que muda mais rápido perto do centro

[Faixas em degradês](https://gradiently.design/pt-br/guide/gradient-banding) e [degradês com grão](https://gradiently.design/pt-br/guide/grainy-gradients) detalham a solução, com código para uma camada de ruído em SVG.

## Onde os degradês monocromáticos funcionam

Como carregam uma cor só, os degradês monocromáticos deixam o texto e a fotografia liderarem. Combinam com lançamentos de produtos de luxo, escritórios de arquitetura, lançamentos de música e qualquer marca cuja identidade seja uma única cor. Coloque as palavras na ponta mais clara ou mais escura do mesmo matiz, ou em branco ou preto, e o design se lê como uma decisão confiante.

Se precisar de um destaque, tire-o de fora do matiz e use-o uma vez: uma única data laranja sobre um degradê marinho, ou um preço vermelho sobre grafite. O degradê continua monocromático, e o destaque recebe toda a atenção porque nada mais compete por ela.

Capa de álbum quadrada em tons de preto profundo e carvão, com uma única palavra em letras claras

Uma capa quadrada de lançamento em 1080×1080, quase toda em sombra, com a luz subindo por uma borda.

Destaque largo de site de um escritório de arquitetura sobre um degradê escuro de uma só cor

Um destaque de site em 1920×1080: a mesma abordagem discreta, de uma só cor, num quadro bem mais largo.

Um fundo monocromático na Gradiently também pode se mover: um Mark renderiza a sua luz ao vivo, então um degradê de uma cor pode derivar devagar atrás das palavras e, com o Pro, ser exportado como um loop contínuo em cada tamanho que você criar.

## FAQ

### O que é um degradê monocromático?

Um degradê que mistura um único matiz pelos seus próprios tons, do escuro ao claro, ou que vai do preto ao branco passando por cinzas.

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

Não. Um esquema monocromático é uma paleta de um matiz usada num design; um degradê monocromático é uma mistura contínua de um único matiz.

### Como faço um degradê de uma cor em CSS?

Escreva as paradas em oklch e mude apenas a luminosidade, por exemplo de `oklch(0.18 0.08 264)` a `oklch(0.86 0.06 264)`. O matiz fica fixo, então a cor não deriva.

### Por que o meu degradê preto tem listras?

Tons escuros têm pouquíssimos degraus distintos numa tela de 8 bits, então a mistura mostra faixas. Acrescente uma camada leve de grão, amplie a faixa de luminosidade ou exporte em PNG.

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

`linear-gradient(180deg, #000000 0%, #ffffff 100%)` é a versão simples. Para um visual mais rico, concentre as paradas no lado escuro e pare antes do branco puro.