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

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

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. 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. 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. 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. 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 cobre essa versão. Para um metal quente com a mesma lógica, veja o gradiente dourado.

Prata versus cinza simples

Se o que você quer é uma superfície neutra e calma, e não metal, o trabalho é outro: o gradiente cinza e o gradiente monocromático 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.

Texto e botões prata em 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);
}

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 tem mais padrões de botão, e o texto com gradiente explica o recorte do texto e o suporte nos navegadores.

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.

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 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.