Zilververloop: metallic codes en hoe je ze belicht

Een zilververloop lijkt op metaal als het drie dingen heeft die gewoon grijs mist: een vleugje koele tint, een grote sprong tussen de donkerste en lichtste stop, en een highlight die smal is in plaats van uitgesmeerd. Een betrouwbare beginner is linear-gradient(135deg, #5f6670, #c9cfd6, #f7f9fb, #a7afb9, #4b525c). Hieronder staan zes zilvers om te kopiëren, de lichtregels erachter en CSS voor zilveren tekst, knoppen en geborsteld metaal.

Codes voor zilververlopen

Een zilververloop belichten

Zilver toont, zoals elk gepolijst metaal, vooral teruggekaatst licht. Je verloop is een geschilderde weerspiegeling, dus denk na over waar het licht vandaan komt en hoe scherp het oppervlak het vangt.

1. 1

   Geef het grijs een lichte koele tint

   Voeg aan elke stop een vleugje blauw toe, net genoeg dat het grijs niet meer op stof of cement lijkt.

2. 2

   Ga donkerder dan prettig voelt

   Metaal heeft een diepe schaduw nodig. Je donkerste stop hoort kanonmetaal te zijn, geen middengrijs.

3. 3

   Houd de highlight smal

   Een bijna witte band over een klein deel van het verloop leest als glans. Een breed licht vlak leest als een bleekgrijs oppervlak.

4. 4

   Kies gepolijst of satijn

   Zet stops dicht bij elkaar voor gepolijst zilver met scherpe weerspiegelingen; spreid ze uit voor een zachte satijnafwerking.

Duw het contrast helemaal door, met een harde horizonlijn door het midden, en zilver wordt spiegelchroom; chroomtekst-effect behandelt die versie. Voor een warm metaal met dezelfde logica, zie goudverloop.

Zilver versus gewoon grijs

Wil je eigenlijk een rustig neutraal oppervlak in plaats van metaal, dan is dat een andere klus: grijsverloop en monochroom verloop behandelen zachte, tonale grijstinten voor achtergronden.

Welke zilverafwerking gebruik je

Elke afwerking zegt iets anders, dus kies hem voor de klus en niet uit gewoonte. Een merk kan er prima twee gebruiken, bijvoorbeeld gepolijst zilver voor een logo en geborsteld zilver voor verpakkingspanelen, zolang de tint gelijk blijft.

Zilveren tekst en knoppen 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);
}

De knop gebruikt een stap in het midden, van 48% naar 52%, die leest als een horizon weerspiegeld in een gebogen oppervlak. CSS-verloopknop heeft meer knoppatronen, en verloop-tekst legt tekstclipping en browserondersteuning uit.

Ontwerpen met zilver

Zilver leest modern, koel en precies, waar goud warm en traditioneel leest. Het past bij techlanceringen, horloges en juwelen, jubilea (zilver is het traditionele 25e), wintercampagnes en alles met een futuristisch randje. Net als goud oogt het het kostbaarst in kleine doses op een donkere ondergrond: een monogram, een dunne lijn, één titel.

Zilver combineert ook goed met ijsblauw en diep marineblauw voor een winterpalet, en met zwart en wit voor een strakke, redactionele look. Luxe kleurenpaletten heeft verschillende combinaties rond koele metalen. In de Studio van Gradiently wordt een koele metallic Mark live achter je tekst weergegeven in elk formaat, en Auto-inkt kiest lichte of donkere letters per regel uit het eigen palet van de Mark, zodat zilveren oppervlakken leesbaar blijven zonder dat jij elk formaat nakijkt.