In breve
- Una sfumatura argento si legge come metallo e non come grigio quando unisce una leggera tinta fredda, un’ampia gamma dallo scuro al chiaro e una luce stretta e brillante.
- L’argento lucido ha transizioni nette e forte contrasto, l’argento satinato ha transizioni morbide e l’argento spazzolato aggiunge sottili linee parallele.
- I grigi neutri puri tendono a sembrare piatti e polverosi, quindi la maggior parte degli argenti convincenti vira appena verso il blu o, per platino e peltro, appena verso il caldo.
- Le sfumature di grigio lunghe e sottili sono particolarmente soggette a banding, che uno strato di grana fine nasconde.
- Le sfumature argento funzionano meglio su testi, bordi, pulsanti e piccole forme, su fondo scuro.
In questa pagina
Una sfumatura argento sembra metallo quando ha tre cose che al grigio semplice mancano: una lieve tinta fredda, un grande salto tra il punto più scuro e il più chiaro e una luce stretta invece che diffusa. Un codice affidabile da cui partire è linear-gradient(135deg, #5f6670, #c9cfd6, #f7f9fb, #a7afb9, #4b525c). Qui sotto trovi sei argenti da copiare, le regole di illuminazione che li reggono e il CSS per testo argento, pulsanti e metallo spazzolato.
Codici per sfumature argento
Come illuminare una sfumatura argento
L’argento, come ogni metallo lucido, mostra soprattutto luce riflessa. La tua sfumatura è un riflesso dipinto, quindi pensa da dove viene la luce e con quanta nettezza la superficie la cattura.
- 1
Tingi i grigi di un lieve freddo
Aggiungi un tocco di blu a ogni punto, quanto basta perché il grigio non sembri più polvere o cemento.
- 2
Scurisci più di quanto sembri giusto
Il metallo ha bisogno di un’ombra profonda. Il tuo punto più scuro dovrebbe essere un grigio canna di fucile, non un grigio medio.
- 3
Tieni la luce stretta
Una fascia quasi bianca che copre una piccola fetta della sfumatura si legge come lucentezza. Un’ampia area chiara si legge come una superficie di grigio pallido.
- 4
Decidi: lucido o satinato
Avvicina i punti per un argento lucido con riflessi nitidi; allargali per una finitura satinata e morbida.
Spingi il contrasto al massimo, con una linea d’orizzonte netta al centro, e l’argento diventa cromo a specchio; l’effetto testo cromato tratta quella versione. Per un metallo caldo con la stessa logica, vedi la sfumatura oro.
Argento contro grigio semplice
Si legge come grigio
- Grigi perfettamente neutri
- Due punti, da grigio chiaro a grigio medio
- Solo transizioni uniformi e dolci
- Un’ampia area pallida senza una luce chiara
- Grandi aree piatte d’argento su una pagina bianca
Si legge come argento
- Grigi con una lieve tinta fredda o calda
- Cinque o sei punti, da canna di fucile a quasi bianco
- Un riflesso più netto da qualche parte
- Una luce stretta e brillante fuori centro
- Dettagli argento su fondo scuro
Se invece vuoi una calma superficie neutra e non il metallo, è un altro lavoro: sfumatura grigia e sfumatura monocromatica trattano grigi morbidi e tonali per gli sfondi.
Quale finitura d’argento usare
Ogni finitura dice qualcosa di leggermente diverso, quindi sceglila per il compito e non per abitudine. Un brand può usarne tranquillamente due, per esempio argento lucido per un logo e argento spazzolato per i pannelli della confezione, purché la tinta resti la stessa.
Usala per
Usala per
Aspetto
Usala per
Usala per
Usala per
Testo e pulsanti argento in 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);
}Il pulsante usa un salto a metà, dal 48% al 52%, che si legge come un orizzonte riflesso in una superficie curva. CSS per pulsanti con sfumatura ha altri schemi di pulsanti, e il testo con sfumatura spiega il ritaglio del testo e il suo supporto tra i browser.
Progettare con l’argento
L’argento si legge come moderno, freddo e preciso, dove l’oro si legge come caldo e tradizionale. Si adatta a lanci tecnologici, orologi e gioielli, anniversari (l’argento è il tradizionale 25°), campagne invernali e tutto ciò che ha un tocco futurista. Come l’oro, sembra più prezioso in piccole dosi su fondo scuro: un monogramma, un filetto sottile, un solo titolo.
Un invito per un anniversario in cui una luce fredda e metallica porta il tema e le parole restano calme.
Un post di prodotto per un orologio: una superficie scura e fredda con l’argento come luce, non come riempimento grigio piatto.
L’argento sta bene anche con azzurri ghiaccio e blu notte profondo per una palette invernale, e con nero e bianco per un aspetto netto ed editoriale. Palette di colori di lusso ha diverse combinazioni costruite sui metalli freddi. Nello Studio di Gradiently, un Mark metallico freddo viene reso dal vivo dietro le tue parole a ogni dimensione, e l’inchiostro automatico sceglie testo chiaro o scuro per ogni riga dalla palette del Mark stesso, così le superfici argento restano leggibili senza che tu controlli ogni formato.
Le domande più frequenti
Qual è un buon codice per una sfumatura argento?
Prova linear-gradient(135deg, #5f6670, #c9cfd6, #f7f9fb, #a7afb9, #4b525c). Va dal grigio canna di fucile all’argento chiaro fino a una luce quasi bianca e ritorno.
Quali codici esadecimali danno un argento metallico?
Una combinazione come #4b525c, #5f6670, #a7afb9, #c9cfd6 e #f7f9fb. Ognuno vira appena verso il blu, il che evita che sembri un grigio semplice.
Come faccio un effetto metallo spazzolato in CSS?
Usa una sfumatura lineare ripetuta con punti minuscoli a uno o due pixel di distanza in grigi vicini, come repeating-linear-gradient(90deg, #b9bec5 0px, #d3d7dc 1px, #aeb3ba 2px, #c8ccd2 4px).
Perché la mia sfumatura argento sembra grigia?
Probabilmente mancano contrasto e una luce. Aggiungi un punto più scuro canna di fucile, una fascia stretta quasi bianca e una lieve tinta fredda a ogni punto.
Che differenza c’è tra sfumature argento e platino?
Nel design il platino è di solito un argento leggermente più freddo e brillante con una luce più bianca, mentre il peltro è un grigio argento più scuro e caldo.
Che colore di sfondo fa risaltare di più l’argento?
Fondi scuri come nero, carbone, blu notte profondo o blu mezzanotte. L’argento su bianco o grigio chiaro perde la sua luce e tende a sembrare piatto e slavato.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo