# Degradê cinza: códigos neutros que não são sem graça

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

O cinza é a cor que as pessoas escolhem quando não querem escolher. Com um tom, uma luz e um único acento, ele vira um dos fundos mais confiantes que você pode usar.

## The short version

- Um degradê cinza parece bem pensado quando os cinzas levam um leve tom, frio em direção ao azul ou quente em direção ao marrom.
- Misturar cinzas quentes e frios no mesmo degradê o deixa com aspecto sujo, então escolha uma temperatura e mantenha.
- Cinzas metálicos vêm de uma faixa nítida e clara entre pontos mais escuros, que imita a luz batendo em uma superfície.
- Degradês cinza formam faixas de forma mais visível do que os coloridos, e uma camada de grão fino é a correção de sempre.
- Um único acento saturado contra um degradê cinza faz o design inteiro parecer intencional.

Um **degradê cinza** deixa de ser sem graça no momento em que seus cinzas ganham um tom. Cinzas totalmente neutros, com vermelho, verde e azul iguais, parecem chapados e digitais. Empurre-os um pouco para o frio, em direção ao azul, e você tem névoa, ardósia e aço; empurre para o quente, em direção ao marrom, e você tem pedra, concreto e estanho. Acrescente uma luz que vem de algum lugar e um único acento, e o cinza vira calmo, moderno e discretamente confiante. Os códigos de cada um vêm a seguir.

## Cinza quente ou cinza frio: escolha um

Cinzas frios parecem técnicos, limpos e precisos. Cinzas quentes parecem arquitetônicos, naturais e suaves. Os dois funcionam muito bem sozinhos. Juntos em um degradê, brigam, e o resultado parece uma mancha. Olhe as amostras abaixo em pares: a fileira de cima puxa para o azul, a de baixo puxa para o marrom, e a diferença é pequena, mas óbvia depois que você a vê.

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

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

## Códigos de degradê cinza frio e quente

Névoa e ardósia são o par frio: névoa para layouts claros e arejados e ardósia para os escuros e sérios. A tempestade acrescenta uma nuvem iluminada, que dá profundidade real a um cinza escuro. Pedra e concreto são o par quente, mais próximo de materiais de construção, e o grafite é o quase preto que você pode usar no lugar do preto puro.

- 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%)`
- Concreto: `linear-gradient(135deg, #8f8b86 0%, #b5b1ab 50%, #d8d5d0 100%)`
- Grafite: `linear-gradient(160deg, #1c1c1e 0%, #2f2f33 50%, #4a4a50 100%)`

Seis cinzas com temperatura. Tempestade e grafite sustentam texto branco; névoa, pedra e concreto pedem texto escuro.

Se for ainda mais escuro, os códigos de [degradê preto](https://gradiently.design/pt-br/guide/black-gradient) continuam a partir do grafite. Para designs feitos de um só tom em muitos níveis de luminosidade, veja [degradê monocromático](https://gradiently.design/pt-br/guide/monochrome-gradient).

## Prata, aço e outros degradês cinza metálicos

Metal não é uma cor, é um reflexo. Um **degradê prata** funciona por causa de uma faixa nítida e clara espremida entre pontos mais escuros, do jeito que a luz bate em uma superfície curva. O chumbo usa o mesmo truque em um nível mais escuro, e o aço escovado acrescenta linhas finas paralelas. São ousados, então use-os em um selo, em uma placa de título ou em um único painel, e não em uma página inteira.

- Prata polida: `linear-gradient(135deg, #e8eaed 0%, #b9bec4 25%, #f5f6f7 50%, #9ea4ab 75%, #d6d9dd 100%)`
- Cinza-chumbo: `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)`

Cinzas metálicos. Quanto mais estreita a faixa clara, mais brilhante o metal parece; abra-a e ele vira acetinado.

O aço escovado fica melhor quando as linhas ficam sobre um degradê suave e iluminado, e não sozinhas. Duas camadas resolvem:

```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 pixels sobre uma mistura de prata iluminada. Mude o ângulo da segunda camada para mover onde a luz cai.

## Cinza mais uma cor

Poucos fundos destacam tanto uma única cor forte quanto o cinza. O acento parece mais vivo contra o neutro do que contra qualquer outra cor, então um pouco rende muito: uma palavra, um botão, uma linha. Escolha o acento pelo setor e pelo clima.

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

Use cinzas frios com azul e limão, cinzas quentes com laranja, blush e latão.

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

## Cinza com cara de intencional

### Parece inacabado

- Cinzas totalmente neutros, sem tom
- Cinzas quentes e frios na mesma mistura
- Faixas visíveis em uma superfície lisa
- Três ou quatro cores de acento
- Texto cinza médio sobre fundo cinza médio

### Parece intencional

- Um leve tom azul ou marrom do começo ao fim
- Uma só temperatura do início ao fim
- Um grão fino sobre todo o degradê
- Um acento, usado com parcimônia
- Texto quase branco ou quase preto, nunca cinza médio

O efeito de faixas merece um aviso à parte. Cinzas não têm tom para distrair o olho, então cada passo de um degradê suave aparece, principalmente em telas grandes e depois da compressão. Uma camada leve de ruído o esconde; [textura de ruído em CSS](https://gradiently.design/pt-br/guide/css-noise-texture) traz um trecho de código, e [faixas em degradês](https://gradiently.design/pt-br/guide/gradient-banding) explica por que isso acontece.

## Degradês cinza em sites e no modo escuro

Na web, degradês cinza trabalham melhor em silêncio. Um degradê névoa atrás de uma seção de recursos a separa de uma página branca sem uma borda dura. No modo escuro, um degradê grafite que clareia um pouco em direção ao topo de um card dá profundidade, onde um cinza chapado pareceria um buraco. Mantenha a mudança entre os pontos pequena, alguns por cento de luminosidade, para que o degradê pareça luz e não enfeite. [Design para modo escuro](https://gradiently.design/pt-br/guide/dark-mode-design) cobre as regras mais amplas para interfaces escuras, das cores de superfície ao contraste.

## Fundos em degradê cinza na prática

Arquitetos, escritórios de engenharia e empresas de software usam cinza porque ele deixa o trabalho falar. Um degradê ardósia com texto branco e um acento azul faz o anúncio de um projeto parecer preciso; um degradê pedra quente com texto grafite faz a capa de um portfólio parecer tátil. [Branding de escritório de arquitetura](https://gradiently.design/pt-br/guide/architecture-firm-branding) mostra até onde uma paleta contida pode ir.

Imagem larga do LinkedIn com fundo em degradê cinza ardósia frio e as palavras Feito para durar em branco

Uma imagem de link do LinkedIn sobre um Mark ardósia. Texto branco no lado mais escuro; a área iluminada fica longe das palavras.

Fundos sutis são onde um sistema de design compensa. No Gradiently, um Mark cinza traz o próprio grão, que mantém as faixas afastadas, e a tinta automática escolhe texto claro ou escuro linha a linha conforme o cinza muda ao longo do quadro.

## FAQ

### Como faço um degradê cinza parecer menos sem graça?

Dê aos cinzas um leve tom frio ou quente, ilumine o degradê de um lado, acrescente grão fino e use um único acento saturado.

### Qual é o CSS de um degradê prata?

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

### Degradê cinza ou degradê grey: qual está certo?

Em português, o certo é cinza. Em inglês, gray é a grafia americana e grey a britânica; as duas nomeiam exatamente a mesma cor, então vale pesquisar pelas duas.

### O que combina melhor com um degradê cinza?

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

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

Misturas lisas de cinza mostram cada passo de cor, principalmente depois da compressão. Acrescente uma camada leve de ruído e exporte em PNG.