# Zilververloop: metallic codes en hoe je ze belicht

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

Het verschil tussen zilver en gewoon grijs is licht. Hier zijn zes zilververlopen om te kopiëren, de vier regels waardoor ze als metaal lezen en CSS voor tekst, knoppen en geborsteld oppervlak.

## The short version

- Een zilververloop leest als metaal in plaats van grijs als het een lichte koele tint, een groot bereik van donker tot licht en een smalle heldere highlight combineert.
- Gepolijst zilver heeft harde overgangen en sterk contrast, satijnzilver heeft zachte overgangen en geborsteld zilver voegt fijne parallelle lijntjes toe.
- Zuiver neutraal grijs ziet er vaak plat en stoffig uit, dus de meeste overtuigende zilvers neigen heel licht naar blauw of, bij platina en tin, heel licht naar warm.
- Lange, subtiele grijsverlopen zijn extra gevoelig voor banding, die een fijne korrellaag verbergt.
- Zilververlopen werken het best op letters, randen, knoppen en kleine vormen, tegen een donkere ondergrond.

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

- Gepolijst zilver: `linear-gradient(135deg, #5f6670 0%, #c9cfd6 28%, #f7f9fb 44%, #a7afb9 58%, #4b525c 82%, #9aa2ac 100%)`
- Satijnzilver: `linear-gradient(160deg, #8d939b 0%, #c3c8ce 35%, #e4e7ea 55%, #b5bbc2 75%, #8a9098 100%)`
- Geborsteld zilver: `repeating-linear-gradient(90deg, #b9bec5 0px, #d3d7dc 1px, #aeb3ba 2px, #c8ccd2 4px)`
- Koel platina: `linear-gradient(135deg, #6f7680 0%, #d6dce4 30%, #fbfdff 45%, #b9c3cf 60%, #56606c 100%)`
- Warm tin: `linear-gradient(135deg, #4f4c48 0%, #a39f99 30%, #e3e0da 46%, #9b968f 62%, #4a4743 100%)`
- Zilverlicht op zwart: `radial-gradient(ellipse at 30% 20%, #e9edf1 0%, #8f97a1 22%, #2b3038 52%, #0c0e11 85%)`

Zes zilvers: vier voor letters, randen en vormen, één geborsteld oppervlak en één achtergrond. Elk heeft een donkere stop en een bijna witte highlight.

- Schaduwstaal: #4b525c
- Kanonmetaal: #5f6670
- Zilver: #a7afb9
- Licht zilver: #c9cfd6
- Highlight: #f7f9fb

De zilverkleurcodes achter Gepolijst zilver. Elk neigt een beetje naar blauw, daarom lezen ze als metaal en niet als beton.

## 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. **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. **Ga donkerder dan prettig voelt** Metaal heeft een diepe schaduw nodig. Je donkerste stop hoort kanonmetaal te zijn, geen middengrijs.
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. **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](https://gradiently.design/nl/guide/chrome-effect) behandelt die versie. Voor een warm metaal met dezelfde logica, zie [goudverloop](https://gradiently.design/nl/guide/gold-gradient-design).

## Zilver versus gewoon grijs

### Leest als grijs

- Volkomen neutrale grijstinten
- Twee stops, lichtgrijs naar middengrijs
- Alleen gelijkmatige, zachte overgangen
- Een breed bleek vlak zonder duidelijke highlight
- Grote vlakke zilveren vlakken op een witte pagina

### Leest als zilver

- Grijstinten met een lichte koele of warme tint
- Vijf of zes stops, kanonmetaal tot bijna wit
- Ergens één scherpere weerspiegeling
- Een smalle, heldere highlight naast het midden
- Zilveren details op een donkere ondergrond

Wil je eigenlijk een rustig neutraal oppervlak in plaats van metaal, dan is dat een andere klus: [grijsverloop](https://gradiently.design/nl/guide/grey-gradient) en [monochroom verloop](https://gradiently.design/nl/guide/monochrome-gradient) 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.

| Afwerking | Hoe het eruitziet | Gebruik het voor |
| --- | --- | --- |
| Gepolijst | Scherpe weerspiegelingen, sterk contrast, een heldere smalle highlight | Logo’s, koppen, award-graphics |
| Satijn | Zachte overgangen, milde glans, weinig contrast | Grote vlakken, verpakking, rustige achtergronden |
| Geborsteld | Fijne parallelle lijntjes onder een zachte glans | Panelen, productpagina’s, technische merken |
| Platina | Koele, heldere, bijna witte highlight | Premium niveaus, jubilea, juwelen |
| Tin | Donkerder, warmer, zachter | Erfgoed, ambacht, herenmode |

Vijf zilverafwerkingen en waar elk thuishoort. Alle zijn gebouwd op dezelfde lichtregels; alleen contrast, tint en stopafstand veranderen.

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

Zilveren koptekst, een pilknop met gesplitste weerspiegeling en een geborsteld metalen paneel. De donkere tekst van de knop houdt het label leesbaar.

De knop gebruikt een stap in het midden, van 48% naar 52%, die leest als een horizon weerspiegeld in een gebogen oppervlak. [CSS-verloopknop](https://gradiently.design/nl/guide/css-gradient-button) heeft meer knoppatronen, en [verloop-tekst](https://gradiently.design/nl/guide/css-gradient-text) legt tekstclipping en browserondersteuning uit.

> **Grijs krijgt snel banding** Lange, subtiele grijsverlopen laten banding het sterkst zien, zeker nadat een platform je afbeelding comprimeert. Voeg een fijne korrellaag toe en exporteer PNG op volledig formaat. [Verloopbanding](https://gradiently.design/nl/guide/gradient-banding) legt uit waarom.

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

Een staande uitnodiging voor een zilveren jubileum met koel metallic licht en de woorden Vijfentwintig jaar

Een jubileumuitnodiging waarin koel, metallic licht het thema draagt en de tekst rustig blijft.

Een staande productpost die een stalen horloge aankondigt op een donkere, koele achtergrond

Een productpost voor een horloge: een donker, koel oppervlak met zilver als licht, niet als vlakke vulling.

Zilver combineert ook goed met ijsblauw en diep marineblauw voor een winterpalet, en met zwart en wit voor een strakke, redactionele look. [Luxe kleurenpaletten](https://gradiently.design/nl/guide/luxury-color-palettes) 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.

## FAQ

### Wat is een goede code voor een zilververloop?

Probeer `linear-gradient(135deg, #5f6670, #c9cfd6, #f7f9fb, #a7afb9, #4b525c)`. Het loopt van kanonmetaal via lichtzilver naar een bijna witte highlight en weer terug.

### Welke hexcodes maken metallic zilver?

Een combinatie als #4b525c, #5f6670, #a7afb9, #c9cfd6 en #f7f9fb. Elk neigt heel licht naar blauw, waardoor het niet op gewoon grijs lijkt.

### Hoe maak ik een geborsteld-metaaleffect in CSS?

Gebruik een herhalend lineair verloop met piepkleine stops op een pixel of twee afstand in dicht bij elkaar liggende grijstinten, zoals `repeating-linear-gradient(90deg, #b9bec5 0px, #d3d7dc 1px, #aeb3ba 2px, #c8ccd2 4px)`.

### Waarom ziet mijn zilververloop er grijs uit?

Waarschijnlijk mist het contrast en een highlight. Voeg een donkerdere kanonmetaalstop, een smalle bijna witte band en een lichte koele tint aan elke stop toe.

### Wat is het verschil tussen zilver- en platinaverlopen?

In design is platina meestal een iets koeler, helderder zilver met een wittere highlight, terwijl tin een donkerder, warmer zilvergrijs is.

### Welke achtergrondkleur laat zilver het best uitkomen?

Donkere ondergronden zoals zwart, antraciet, diep marineblauw of middernachtblauw. Zilver op wit of lichtgrijs verliest zijn highlight en oogt vaak plat en uitgewassen.