Silver gradient
Silver, like gold, only looks metallic as a gradient: several grey bands of different lightness, with a bright highlight next to a darker reflection. A hint of cool blue in the greys reads as polished steel. Below are 12 silver gradients — copy the CSS, download a PNG, or open one in the editor.
Quick copy — silver metallic:
background: linear-gradient(90deg, #83878b 0%, #8b8f93 2.8%, #93969a 5.5%, #9b9ea2 8.3%, #a3a6aa 11%, #abaeb1 13.8%, #b3b6b9 16.5%, #bcbec1 19.3%, #c4c7c9 22%, #cccfd1 24.8%, #d5d7da 27.5%, #dde0e2 30.3%, #e6e8ea 33%, #e0e2e4 35.8%, #d9dbde 38.7%, #d3d5d8 41.5%, #cccfd2 44.3%, #c6c9cc 47.2%, #c0c3c6 50%, #babdc0 52.8%, #b3b7ba 55.7%, #adb1b4 58.5%, #a7abae 61.3%, #a1a5a9 64.2%, #9b9fa3 67%, #a0a4a7 69.8%, #a4a8ac 72.5%, #a9adb0 75.3%, #aeb2b5 78%, #b3b6ba 80.8%, #b7bbbe 83.5%, #bcc0c3 86.3%, #c1c5c7 89%, #c6c9cc 91.8%, #cbced1 94.5%, #d0d3d5 97.3%, #d5d8da 100%);
background: linear-gradient(in oklch 90deg, #83878b 0%, #e6e8ea 33%, #9b9fa3 67%, #d5d8da 100%);- Aa · 5.2:1
Black text: Passes AA
- Aa · 3.9:1
Black text: Fails AA — large text only (3:1)
- Aa · 8.1:1
Black text: Passes AA
- Aa · 3.9:1
Black text: Fails AA — large text only (3:1)
- Aa · 10.7:1
Black text: Passes AA
- Aa · 3.9:1
White text: Fails AA — large text only (3:1)
- Aa · 10.1:1
Black text: Passes AA
- Aa · 7.0:1
Black text: Passes AA
- Aa · 4.8:1
Black text: Passes AA
- Aa · 6.5:1
Black text: Passes AA
- Aa · 6.1:1
Black text: Passes AA
- Aa · 1.6:1
White text: Fails AA — no plain text
Using silver gradients well
Good for: premium and award badges, chrome buttons, product tiers (silver plan), metallic text and logo plates.
Pairing: Silver pairs with deep navy, black or a single saturated accent such as red. Next to gold it signals a ranking (gold, silver, bronze).
Readable text: The bright highlight band of a silver gradient needs near-black text. Mid-grey silvers sit around 3–5:1 with either black or white, so check each swatch’s worst point. The ratio on each swatch is the worst point across the gradient (WCAG 2: 4.5:1 for body text, 3:1 for large text). Check custom pairs in the contrast checker.
These gradients are blended in OKLCH so the middle stays clean; the copied CSS includes a pre-blended fallback line for older browsers.
Questions
What is the CSS code for a silver gradient?
A simple silver gradient is background: linear-gradient(in oklch 90deg, #83878b 0%, #e6e8ea 33%, #9b9fa3 67%, #d5d8da 100%); Copy any gradient on this page for ready CSS, including a fallback for older browsers.
What colours go well with silver in a gradient?
Silver pairs with deep navy, black or a single saturated accent such as red. Next to gold it signals a ranking (gold, silver, bronze).
What text colour is readable on a silver gradient?
The bright highlight band of a silver gradient needs near-black text. Mid-grey silvers sit around 3–5:1 with either black or white, so check each swatch’s worst point. Each swatch on this page shows the better of black or white text, its worst-case WCAG contrast ratio, and whether it passes AA (4.5:1), is only good for large text (3:1), or fails — for failing swatches, add a darker scrim behind the text or pick a deeper variant.
How do I download a silver gradient image?
Press “PNG” under any gradient to download a 1600×900 image, rendered in your browser. Open it in the editor to change size-independent details first, such as angle or colours.
Where are silver gradients typically used?
Common uses: premium and award badges, chrome buttons, product tiers (silver plan), metallic text and logo plates.