# Gradiente cinzento: códigos neutros que não são aborrecidos

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

O cinzento é a cor que as pessoas escolhem quando não querem escolher. Com tom, luz e um só acento, torna-se um dos fundos mais confiantes que podes usar.

## The short version

- Um gradiente cinzento parece pensado quando os seus cinzentos têm um ligeiro tom, frio para o azul ou quente para o castanho.
- Misturar cinzentos quentes e frios no mesmo gradiente faz com que pareça sujo, por isso escolhe uma temperatura e mantém-na.
- Os cinzentos metálicos vêm de uma faixa nítida e clara entre paragens mais escuras, que imita a luz a bater numa superfície.
- Os gradientes cinzentos fazem faixas mais visíveis do que os coloridos, e uma camada de grão fino é a solução habitual.
- Uma cor de acento saturada contra um gradiente cinzento faz todo o design parecer deliberado.

Um **gradiente cinzento** deixa de ser aborrecido no momento em que os seus cinzentos ganham tom. Os cinzentos neutros puros, com vermelho, verde e azul iguais, parecem planos e digitais. Empurra-os um pouco para o frio, para o azul, e tens névoa, ardósia e aço; empurra-os para o quente, para o castanho, e tens pedra, betão e estanho. Junta uma luz que vem de algum lado e uma cor de acento, e o cinzento torna-se calmo, moderno e discretamente confiante. Seguem-se os códigos de cada um.

## Cinzento quente ou frio: escolhe um

Os cinzentos frios soam técnicos, limpos e precisos. Os quentes soam arquitetónicos, naturais e suaves. Ambos funcionam lindamente sozinhos. Juntos num gradiente lutam entre si, e o resultado parece uma mancha. Olha para as amostras abaixo em pares: a linha de cima inclina-se para o azul, a de baixo para o castanho, e a diferença é pequena mas óbvia depois de a veres.

- Névoa: #f4f6f8
- Bruma fria: #aeb6be
- Ardósia: #4a535d
- Tempestade: #22272c
- Giz: #f3f1ee
- Betão: #b5b1ab
- Estanho: #5f5b56
- Grafite: #1c1c1e

Quatro cinzentos frios e quatro quentes. O grafite fica perto do neutro, e por isso combina com quase tudo.

## Códigos de gradiente cinzento frio e quente

A névoa e a ardósia são o par frio: névoa para composições claras e arejadas e ardósia para as escuras e sérias. A tempestade junta uma nuvem iluminada, que dá profundidade real a um cinzento escuro. A pedra e o betão são o par quente, mais próximo de materiais de construção, e o grafite é o quase preto que podes usar em vez de preto simples.

- Névoa: `linear-gradient(180deg, #f4f6f8 0%, #d9dee3 55%, #aeb6be 100%)`
- Ardósia: `linear-gradient(160deg, #2b3138 0%, #4a535d 50%, #7d8792 100%)`
- Tempestade: `radial-gradient(ellipse at 70% 20%, #9aa3ad 0%, #5b636c 40%, #22272c 100%)`
- Pedra quente: `linear-gradient(160deg, #f3f1ee 0%, #d6d1ca 50%, #9e978e 100%)`
- Betão: `linear-gradient(135deg, #8f8b86 0%, #b5b1ab 50%, #d8d5d0 100%)`
- Grafite: `linear-gradient(160deg, #1c1c1e 0%, #2f2f33 50%, #4a4a50 100%)`

Seis cinzentos com temperatura. A tempestade e o grafite levam letra branca; a névoa, a pedra e o betão pedem letra escura.

Se fores ainda mais escuro, os códigos de [gradiente preto](https://gradiently.design/pt-pt/guide/black-gradient) continuam a partir do grafite. Para designs construídos com um só matiz em muitos níveis de luminosidade, vê [gradiente monocromático](https://gradiently.design/pt-pt/guide/monochrome-gradient).

## Prata, aço e outros gradientes cinzentos metálicos

O metal não é uma cor, é um reflexo. Um **gradiente prateado** funciona por causa de uma faixa nítida e clara espremida entre paragens mais escuras, como a luz a bater numa superfície curva. O metal de canhão usa o mesmo truque num nível mais escuro, e o aço escovado junta linhas finas paralelas. São ousados, por isso usa-os num emblema, numa placa de título ou num só painel e não numa página inteira.

- Prata polida: `linear-gradient(135deg, #e8eaed 0%, #b9bec4 25%, #f5f6f7 50%, #9ea4ab 75%, #d6d9dd 100%)`
- Metal de canhão: `linear-gradient(160deg, #1f2428 0%, #3a4147 45%, #5d666e 60%, #2a3035 100%)`
- Estanho: `linear-gradient(135deg, #5f5b56 0%, #8c8781 45%, #c2bdb6 55%, #77726c 100%)`
- Linhas de aço escovado: `repeating-linear-gradient(90deg, #c7cbd0 0px, #d9dce0 2px, #b8bdc3 4px)`

Cinzentos metálicos. Quanto mais apertada a faixa clara, mais brilhante o metal parece; alarga-a e fica acetinado.

O aço escovado fica melhor quando as linhas assentam sobre um gradiente suave e iluminado e não sozinhas. Duas camadas conseguem-no:

```css
.steel {
  background-color: #b9bec4;
  background-image:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.07) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, #9ea4ab 0%, #e8eaed 45%, #b9bec4 55%, #7f868e 100%);
}
```

Linhas brancas finas a cada três píxeis sobre uma mistura de prata iluminada. Muda o ângulo da segunda camada para mover o sítio onde cai a luz.

## Cinzento mais uma cor

Poucos fundos destacam tão bem uma única cor forte como o cinzento. O acento parece mais vivo contra o neutro do que contra outras cores, por isso um pouco chega: uma palavra, um botão, uma linha. Escolhe o acento pelo setor e pelo humor.

| Acento | Hex | Soa a | Bom para |
| --- | --- | --- | --- |
| Azul elétrico | `#3b82f6` | Técnico, de confiança | Software, fintech, dados |
| Laranja de sinalização | `#f97316` | Industrial, enérgico | Construção, ferramentas, logística |
| Lima | `#a3e635` | Desportivo, fresco | Fitness, corrida, equipamento de ar livre |
| Blush | `#f2c6c2` | Suave, na moda | Moda, beleza, estilo de vida |
| Latão | `#c9a24a` | Premium, clássico | Arquitetura, relógios, hotéis |

Usa cinzentos frios com azul e lima, cinzentos quentes com laranja, blush e latão.

Há esquemas completos construídos assim em [paletas de cores tecnológicas](https://gradiently.design/pt-pt/guide/tech-color-palettes) e [paletas de cores neutras](https://gradiently.design/pt-pt/guide/neutral-color-palettes).

## Cinzento com ar deliberado

### Parece inacabado

- Cinzentos neutros puros sem tom
- Cinzentos quentes e frios na mesma mistura
- Faixas visíveis numa superfície lisa
- Três ou quatro cores de acento
- Texto cinzento médio sobre fundo cinzento médio

### Parece deliberado

- Um ligeiro tom azul ou castanho do princípio ao fim
- Uma só temperatura de ponta a ponta
- Um grão fino por cima de todo o gradiente
- Um acento, usado com parcimónia
- Letra quase branca ou quase preta, nunca cinzento médio

As faixas merecem um aviso próprio. Os cinzentos não têm matiz que distraia o olho, por isso cada passo de um gradiente suave se vê, sobretudo em ecrãs grandes e depois de compressão. Uma camada leve de ruído esconde-o; [textura de ruído em CSS](https://gradiently.design/pt-pt/guide/css-noise-texture) tem um excerto, e [bandas em gradientes](https://gradiently.design/pt-pt/guide/gradient-banding) explica porque acontecem.

## Gradientes cinzentos em sites e no modo escuro

Na web, os gradientes cinzentos fazem o melhor trabalho em silêncio. Um gradiente de névoa atrás de uma secção de funcionalidades separa-a de uma página branca sem aresta dura. No modo escuro, um gradiente de grafite que sobe ligeiramente para o topo de um cartão dá-lhe profundidade, onde um cinzento plano pareceria um buraco. Mantém a mudança entre paragens pequena, uns poucos por cento de luminosidade, para o gradiente se ler como luz e não como decoração. [Design para modo escuro](https://gradiently.design/pt-pt/guide/dark-mode-design) cobre as regras mais amplas das interfaces escuras, das cores de superfície ao contraste.

## Fundos de gradiente cinzento na prática

Arquitetos, empresas de engenharia e empresas de software usam o cinzento porque deixa o trabalho falar. Um gradiente de ardósia com letra branca e um acento azul faz o anúncio de um projeto parecer preciso; um gradiente de pedra quente com letra de grafite faz a capa de um portefólio parecer tátil. [Identidade de marca para gabinetes de arquitetura](https://gradiently.design/pt-pt/guide/architecture-firm-branding) mostra até onde uma paleta contida pode ir.

Uma imagem larga do LinkedIn com fundo de gradiente cinzento ardósia frio e as palavras Feito para durar a branco

Uma imagem de ligação do LinkedIn sobre um Mark cor de ardósia. Letra branca no lado mais escuro; a zona iluminada fica longe das palavras.

Os fundos subtis são onde um sistema de design compensa. No Gradiently, um Mark cinzento traz o seu próprio grão, que mantém as faixas afastadas, e a tinta automática escolhe tipo claro ou escuro linha a linha à medida que o cinzento muda ao longo do quadro.

## FAQ

### Como faço um gradiente cinzento parecer menos aborrecido?

Dá aos cinzentos um ligeiro tom frio ou quente, ilumina o gradiente de um lado, junta grão fino e usa uma cor de acento saturada.

### Qual é o CSS de um gradiente prateado?

Usa uma faixa clara entre paragens mais escuras, por exemplo `linear-gradient(135deg, #e8eaed 0%, #b9bec4 25%, #f5f6f7 50%, #9ea4ab 75%, #d6d9dd 100%)`.

### Diz-se gradiente cinzento ou gradiente cinza?

Ambas as formas existem. Cinzento é a mais usada em Portugal e cinza a mais comum no Brasil; designam exatamente a mesma cor.

### Que cor combina melhor com um gradiente cinzento?

Um acento forte: azul elétrico ou lima com cinzentos frios, laranja de sinalização, blush ou latão com cinzentos quentes.

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

As misturas lisas de cinzento mostram cada passo de cor, sobretudo depois de compressão. Junta uma camada leve de ruído e exporta em PNG.