A versão curta
- Um gradiente prateado lê-se como metal e não como cinzento quando combina um ligeiro tom frio, uma grande amplitude do escuro ao claro e um brilho estreito e claro.
- A prata polida tem transições duras e contraste forte, a prata acetinada tem transições suaves e a prata escovada acrescenta linhas finas paralelas.
- Os cinzentos puramente neutros tendem a parecer planos e empoeirados, por isso a maioria das pratas convincentes inclina-se muito ligeiramente para o azul ou, na platina e no estanho, muito ligeiramente para o quente.
- Os gradientes cinzentos longos e subtis são especialmente propensos a faixas visíveis, que uma camada de grão fino esconde.
- Os gradientes prateados funcionam melhor em texto, contornos, botões e formas pequenas, sobre um fundo escuro.
Nesta página
Um gradiente prateado parece metal quando tem três coisas que o cinzento simples não tem: um leve tom frio, um grande salto entre as paragens mais escura e mais clara e um brilho estreito em vez de espalhado. Um código de partida fiável é linear-gradient(135deg, #5f6670, #c9cfd6, #f7f9fb, #a7afb9, #4b525c). Abaixo tens seis pratas para copiares, as regras de iluminação por trás delas e CSS para texto prateado, botões e metal escovado.
Códigos de gradientes prateados
Como iluminar um gradiente prateado
A prata, como qualquer metal polido, mostra sobretudo luz refletida. O teu gradiente é um reflexo pintado, por isso pensa de onde vem a luz e com que nitidez a superfície a apanha.
- 1
Dá aos cinzentos um leve tom frio
Junta um toque de azul a cada paragem, só o suficiente para o cinzento deixar de parecer pó ou cimento.
- 2
Vai mais escuro do que parece certo
O metal precisa de uma sombra profunda. A tua paragem mais escura deve ser um metal de canhão, não um cinzento médio.
- 3
Mantém o brilho estreito
Uma faixa quase branca a cobrir uma pequena fatia do gradiente lê-se como brilho. Uma zona clara larga lê-se como uma superfície cinzenta pálida.
- 4
Decide entre polida e acetinada
Aproxima as paragens para uma prata polida com reflexos nítidos; afasta-as para um acabamento suave e acetinado.
Leva o contraste até ao fim, com uma linha de horizonte dura a meio, e a prata torna-se cromado de espelho; efeito de texto cromado trata dessa versão. Para um metal quente com a mesma lógica, vê gradiente dourado.
Prata contra cinzento simples
Lê-se como cinzento
- Cinzentos perfeitamente neutros
- Duas paragens, do cinzento claro ao cinzento médio
- Apenas transições suaves e uniformes
- Uma zona clara larga sem brilho definido
- Grandes áreas planas de prata numa página branca
Lê-se como prata
- Cinzentos com um leve tom frio ou quente
- Cinco ou seis paragens, do metal de canhão ao quase branco
- Um reflexo mais nítido algures
- Um brilho estreito e claro fora do centro
- Pormenores prateados sobre um fundo escuro
Se na verdade queres uma superfície neutra e calma e não metal, é outro trabalho: gradiente cinzento e gradiente monocromático tratam de cinzentos suaves e tonais para fundos.
Que acabamento de prata usar
Cada acabamento diz algo ligeiramente diferente, por isso escolhe-o pelo trabalho e não por hábito. Uma marca pode usar dois sem problema, por exemplo prata polida para um logótipo e prata escovada para painéis de embalagem, desde que o tom se mantenha.
Usa-o para
Aspeto
Usa-o para
Usa-o para
Usa-o para
Usa-o para
Texto e botões prateados 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 a meio, de 48% para 52%, que se lê como um horizonte refletido numa superfície curva. CSS de botão com gradiente tem mais padrões de botões, e texto com gradiente explica o recorte do texto e o seu suporte nos browsers.
Criar com prata
A prata lê-se como moderna, fria e precisa, enquanto o dourado se lê como quente e tradicional. Serve lançamentos de tecnologia, relógios e joalharia, aniversários (a prata é a tradição dos 25 anos), campanhas de inverno e tudo o que tenha um toque futurista. Tal como o dourado, parece mais valiosa em pequenas doses sobre um fundo escuro: um monograma, uma linha fina, um só título.
Um convite de aniversário em que a luz fria e metálica leva o tema e as palavras ficam calmas.
Uma publicação de produto para um relógio: uma superfície escura e fria com a prata como luz, não como preenchimento cinzento plano.
A prata também combina bem com azuis gelados e azul-marinho profundo para uma paleta de inverno, e com preto e branco para um visual austero e editorial. Paletas de cores de luxo tem várias combinações construídas em torno de metais frios. No Studio do Gradiently, um Mark metálico frio é desenhado em direto atrás das tuas palavras em todos os tamanhos, e a Tinta automática escolhe tipografia clara ou escura para cada linha a partir da paleta do próprio Mark, por isso as superfícies prateadas continuam legíveis sem teres de verificar cada formato.
Perguntas frequentes
Qual é um bom código de gradiente prateado?
Experimenta linear-gradient(135deg, #5f6670, #c9cfd6, #f7f9fb, #a7afb9, #4b525c). Vai do metal de canhão, passando pela prata clara, até um brilho quase branco e volta.
Que códigos hex dão prata metálica?
Uma combinação como #4b525c, #5f6670, #a7afb9, #c9cfd6 e #f7f9fb. Cada um inclina-se muito ligeiramente para o azul, o que evita que pareça cinzento simples.
Como faço um efeito de metal escovado em CSS?
Usa um gradiente linear repetido com paragens minúsculas, a um ou dois píxeis de distância, em cinzentos próximos, como repeating-linear-gradient(90deg, #b9bec5 0px, #d3d7dc 1px, #aeb3ba 2px, #c8ccd2 4px).
Porque é que o meu gradiente prateado parece cinzento?
Provavelmente falta-lhe contraste e um brilho. Junta uma paragem mais escura de metal de canhão, uma faixa estreita quase branca e um leve tom frio a cada paragem.
Qual é a diferença entre gradientes prateados e de platina?
Em design, a platina costuma ser uma prata ligeiramente mais fria e mais clara, com um brilho mais branco, enquanto o estanho é um cinzento-prata mais escuro e mais quente.
Que cor de fundo faz a prata ficar melhor?
Fundos escuros como preto, carvão, azul-marinho profundo ou azul-meia-noite. A prata sobre branco ou cinzento pálido perde o brilho e tende a parecer plana e desbotada.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil