# Gradiente prata: códigos metálicos e como iluminá-los

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

A diferença entre prata e cinza simples é a luz. Aqui estão seis gradientes prata para copiar, as quatro regras que os fazem parecer metal e o CSS para texto, botões e superfícies escovadas.

## The short version

- Um gradiente prata parece metal, e não cinza, quando combina um leve tom frio, uma grande amplitude do escuro ao claro e um brilho estreito e intenso.
- A prata polida tem transições duras e forte contraste, a prata acetinada tem transições suaves, e a prata escovada acrescenta linhas finas paralelas.
- Cinzas puramente neutros tendem a parecer chapados e empoeirados, então a maioria das pratas convincentes pende muito levemente para o azul ou, na platina e no estanho, muito levemente para o quente.
- Gradientes cinza longos e sutis são especialmente sujeitos a faixas visíveis (banding), que uma camada de grão fino esconde.
- Gradientes prata funcionam melhor em texto, bordas, botões e formas pequenas, sobre um fundo escuro.

Um **gradiente prata** parece metal quando tem três coisas que o cinza simples não tem: um leve tom frio, um grande salto entre os pontos mais escuro e mais claro, e um brilho estreito em vez de espalhado. Um código confiável para começar é `linear-gradient(135deg, #5f6670, #c9cfd6, #f7f9fb, #a7afb9, #4b525c)`. Abaixo estão seis pratas para copiar, as regras de iluminação por trás delas e o CSS para texto prata, botões e metal escovado.

## Códigos de gradiente prata

- Prata polida: `linear-gradient(135deg, #5f6670 0%, #c9cfd6 28%, #f7f9fb 44%, #a7afb9 58%, #4b525c 82%, #9aa2ac 100%)`
- Prata acetinada: `linear-gradient(160deg, #8d939b 0%, #c3c8ce 35%, #e4e7ea 55%, #b5bbc2 75%, #8a9098 100%)`
- Prata escovada: `repeating-linear-gradient(90deg, #b9bec5 0px, #d3d7dc 1px, #aeb3ba 2px, #c8ccd2 4px)`
- Platina fria: `linear-gradient(135deg, #6f7680 0%, #d6dce4 30%, #fbfdff 45%, #b9c3cf 60%, #56606c 100%)`
- Estanho quente: `linear-gradient(135deg, #4f4c48 0%, #a39f99 30%, #e3e0da 46%, #9b968f 62%, #4a4743 100%)`
- Luz de prata no preto: `radial-gradient(ellipse at 30% 20%, #e9edf1 0%, #8f97a1 22%, #2b3038 52%, #0c0e11 85%)`

Seis pratas: quatro para texto, bordas e formas, uma superfície escovada e um fundo. Cada uma tem um ponto escuro e um brilho quase branco.

- Aço na sombra: #4b525c
- Metal de canhão: #5f6670
- Prata: #a7afb9
- Prata clara: #c9cfd6
- Brilho: #f7f9fb

Os códigos de cor prata por trás da Prata polida. Todos pendem levemente para o azul, e por isso parecem metal, e não concreto.

## Como iluminar um gradiente prata

A prata, como qualquer metal polido, mostra sobretudo luz refletida. Seu gradiente é um reflexo pintado, então pense de onde vem a luz e com que nitidez a superfície a captura.

1. **Dê aos cinzas um leve tom frio** Acrescente um toque de azul a cada ponto, só o bastante para o cinza deixar de parecer poeira ou cimento.
2. **Vá mais escuro do que parece certo** O metal precisa de uma sombra profunda. Seu ponto mais escuro deve ser um cinza chumbo, não um cinza médio.
3. **Mantenha o brilho estreito** Uma faixa quase branca cobrindo uma pequena fatia do gradiente se lê como brilho. Uma área clara larga se lê como uma superfície de cinza pálido.
4. **Decida entre polido e acetinado** Aproxime os pontos para uma prata polida de reflexos nítidos; afaste-os para um acabamento suave e acetinado.

Leve o contraste ao máximo, com uma linha de horizonte dura no meio, e a prata vira cromo espelhado; o [efeito de texto cromado](https://gradiently.design/pt-br/guide/chrome-effect) cobre essa versão. Para um metal quente com a mesma lógica, veja o [gradiente dourado](https://gradiently.design/pt-br/guide/gold-gradient-design).

## Prata versus cinza simples

### Parece cinza

- Cinzas perfeitamente neutros
- Dois pontos, do cinza claro ao cinza médio
- Só transições uniformes e suaves
- Uma área clara larga sem brilho definido
- Grandes áreas chapadas de prata numa página branca

### Parece prata

- Cinzas com um leve tom frio ou quente
- Cinco ou seis pontos, do cinza chumbo ao quase branco
- Um reflexo mais nítido em algum lugar
- Um brilho estreito e intenso fora do centro
- Detalhes de prata sobre um fundo escuro

Se o que você quer é uma superfície neutra e calma, e não metal, o trabalho é outro: o [gradiente cinza](https://gradiently.design/pt-br/guide/grey-gradient) e o [gradiente monocromático](https://gradiently.design/pt-br/guide/monochrome-gradient) tratam de cinzas suaves e tonais para fundos.

## Qual acabamento de prata usar

Cada acabamento diz algo ligeiramente diferente, então escolha pelo trabalho, e não por hábito. Uma marca pode usar dois sem problema, por exemplo prata polida num logo e prata escovada em painéis de embalagem, desde que o tom continue o mesmo.

| Acabamento | Como aparece | Use para |
| --- | --- | --- |
| Polido | Reflexos nítidos, forte contraste, um brilho estreito e intenso | Logos, títulos, gráficos de premiação |
| Acetinado | Transições suaves, brilho delicado, pouco contraste | Grandes superfícies, embalagens, fundos discretos |
| Escovado | Linhas finas paralelas sob um brilho suave | Painéis, páginas de produto, marcas técnicas |
| Platina | Brilho frio, intenso, quase branco | Níveis premium, aniversários, joalheria |
| Estanho | Mais escuro, mais quente, mais suave | Tradição, artesanato, moda masculina |

Cinco acabamentos de prata e o lugar de cada um. Todos seguem as mesmas regras de luz; só mudam o contraste, o tom e o espaçamento dos pontos.

## Texto e botões prata em CSS

```css
.silver-text {
  font-weight: 800;
  font-size: clamp(2.5rem, 8vw, 6rem);
  color: #a7afb9; /* fallback */
  background: linear-gradient(
    135deg,
    #5f6670 0%, #c9cfd6 28%, #f7f9fb 44%,
    #a7afb9 58%, #4b525c 82%, #9aa2ac 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.silver-button {
  padding: 0.85rem 1.6rem;
  border: 1px solid #4b525c;
  border-radius: 999px;
  color: #1c2026;
  font-weight: 600;
  background: linear-gradient(180deg, #f7f9fb 0%, #c9cfd6 48%, #a7afb9 52%, #d9dee3 100%);
  box-shadow: inset 0 1px 0 #ffffff, 0 2px 4px rgb(0 0 0 / 0.25);
  cursor: pointer;
}

.silver-button:hover {
  background: linear-gradient(180deg, #ffffff 0%, #d6dbe0 48%, #b3bac3 52%, #e3e7eb 100%);
}

.brushed {
  background:
    repeating-linear-gradient(90deg, #b9bec5 0px, #d3d7dc 1px, #aeb3ba 2px, #c8ccd2 4px);
}
```

Texto de título prata, um botão em pílula com reflexo dividido e um painel de metal escovado. O texto escuro do botão mantém o rótulo legível.

O botão usa um degrau no meio, de 48% a 52%, que se lê como um horizonte refletido numa superfície curva. O [CSS de botão com gradiente](https://gradiently.design/pt-br/guide/css-gradient-button) tem mais padrões de botão, e o [texto com gradiente](https://gradiently.design/pt-br/guide/css-gradient-text) explica o recorte do texto e o suporte nos navegadores.

> **Cinzas formam faixas com facilidade** Gradientes cinza longos e sutis são onde o banding mais aparece, sobretudo depois que uma plataforma comprime sua imagem. Acrescente uma camada de grão fino e exporte em PNG no tamanho total. O [banding em gradientes](https://gradiently.design/pt-br/guide/gradient-banding) explica o porquê.

## Criar com prata

A prata se lê como moderna, fria e precisa, enquanto o ouro se lê como quente e tradicional. Combina com lançamentos de tecnologia, relógios e joias, aniversários de casamento (a prata é a tradição dos 25 anos), campanhas de inverno e tudo o que tenha um toque futurista. Como o ouro, parece mais valiosa em doses pequenas sobre um fundo escuro: um monograma, um fio fino, um único título.

Um convite vertical de bodas de prata com luz metálica fria e as palavras Vinte e cinco anos

Um convite de aniversário em que a luz fria e metálica carrega o tema e as palavras ficam calmas.

Um post vertical de produto anunciando um relógio de aço sobre um fundo escuro e frio

Um post de produto para um relógio: uma superfície escura e fria com a prata como luz, e não como preenchimento cinza chapado.

A prata também combina com azuis gelo e azul-marinho profundo numa paleta de inverno, e com preto e branco para um visual austero e editorial. As [paletas de cores de luxo](https://gradiently.design/pt-br/guide/luxury-color-palettes) trazem várias combinações construídas em torno de metais frios. No Studio do Gradiently, um Mark metálico e frio é renderizado ao vivo atrás das suas palavras em todos os tamanhos, e o Tinta automática escolhe texto claro ou escuro para cada linha a partir da paleta do próprio Mark, então as superfícies prata continuam legíveis sem você conferir cada formato.

## FAQ

### Qual é um bom código de gradiente prata?

Experimente `linear-gradient(135deg, #5f6670, #c9cfd6, #f7f9fb, #a7afb9, #4b525c)`. Vai do cinza chumbo, passa pela prata clara até um brilho quase branco e volta.

### Quais códigos hex fazem a prata metálica?

Uma combinação como #4b525c, #5f6670, #a7afb9, #c9cfd6 e #f7f9fb. Cada um pende muito levemente para o azul, o que evita que pareça um cinza simples.

### Como faço um efeito de metal escovado em CSS?

Use um gradiente linear repetido com pontos minúsculos a um ou dois pixels de distância, em cinzas próximos, como `repeating-linear-gradient(90deg, #b9bec5 0px, #d3d7dc 1px, #aeb3ba 2px, #c8ccd2 4px)`.

### Por que meu gradiente prata parece cinza?

Provavelmente falta contraste e um brilho. Acrescente um ponto de cinza chumbo mais escuro, uma faixa estreita quase branca e um leve tom frio a cada ponto.

### Qual é a diferença entre gradientes prata e platina?

No design, a platina costuma ser uma prata um pouco mais fria e mais clara, com brilho mais branco, enquanto o estanho é um cinza prateado mais escuro e mais quente.

### Que cor de fundo deixa a prata mais bonita?

Fundos escuros, como preto, grafite, azul-marinho profundo ou azul-meia-noite. A prata sobre branco ou cinza claro perde o brilho e tende a parecer chapada e desbotada.