The short version
- A silver gradient reads as metal rather than grey when it combines a slight cool tint, a wide range from dark to light, and a narrow bright highlight.
- Polished silver has hard transitions and strong contrast, satin silver has soft transitions, and brushed silver adds fine parallel lines.
- Pure neutral greys tend to look flat and dusty, so most convincing silvers lean very slightly blue or, for platinum and pewter, very slightly warm.
- Long, subtle grey gradients are especially prone to banding, which a fine grain layer hides.
- Silver gradients work best on type, borders, buttons and small shapes, set against a dark ground.
On this page
A silver gradient looks like metal when it has three things plain grey lacks: a faint cool tint, a big jump between its darkest and lightest stops, and a highlight that is narrow rather than spread out. A dependable starting code is linear-gradient(135deg, #5f6670, #c9cfd6, #f7f9fb, #a7afb9, #4b525c). Below are six silvers to copy, the lighting rules behind them, and CSS for silver text, buttons and brushed metal.
Silver gradient codes
How to light a silver gradient
Silver, like any polished metal, mostly shows reflected light. Your gradient is a painted reflection, so think about where the light comes from and how sharply the surface catches it.
- 1
Tint the greys slightly cool
Add a touch of blue to every stop, just enough that the grey no longer looks like dust or cement.
- 2
Go darker than feels right
Metal needs a deep shadow. Your darkest stop should be a gunmetal, not a mid grey.
- 3
Keep the highlight narrow
A near white band covering a small slice of the gradient reads as shine. A wide light area reads as a pale grey surface.
- 4
Decide polished or satin
Bring stops close together for polished silver with crisp reflections; spread them out for a soft, satin finish.
Push the contrast all the way, with a hard horizon line through the middle, and silver turns into mirror chrome; chrome text effect covers that version. For a warm metal using the same logic, see gold gradient.
Silver versus plain grey
Reads as grey
- Perfectly neutral greys
- Two stops, light grey to mid grey
- Even, gentle transitions only
- A wide pale area with no clear highlight
- Large flat areas of silver on a white page
Reads as silver
- Greys with a faint cool or warm tint
- Five or six stops, gunmetal to near white
- One sharper reflection somewhere
- A narrow, bright highlight off centre
- Silver details on a dark ground
If you actually want a calm neutral surface rather than metal, that is a different job: gray gradient and monochrome gradient cover soft, tonal greys for backgrounds.
Which silver finish to use
Each finish says something slightly different, so choose it for the job rather than out of habit. A brand can happily use two, for example polished silver for a logo and brushed silver for packaging panels, as long as the tint stays the same.
Use it for
Use it for
Use it for
Use it for
Use it for
Silver text and buttons 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);
}The button uses a step at the middle, from 48% to 52%, which reads as a horizon reflected in a curved surface. Gradient button css has more button patterns, and gradient text explains text clipping and its support across browsers.
Designing with silver
Silver reads as modern, cool and precise, where gold reads as warm and traditional. It suits technology launches, watches and jewellery, anniversaries (silver is the traditional 25th), winter campaigns and anything with a futurist edge. Like gold, it looks most valuable in small doses on a dark ground: a monogram, a thin rule, a single title.
An anniversary invitation where cool, metallic light carries the theme and the words stay calm.
A product post for a watch: a dark, cool surface with silver as light, not as flat grey fill.
Silver also pairs well with icy blues and deep navy for a winter palette, and with black and white for a stark, editorial look. Luxury color palettes has several combinations built around cool metals. In Gradiently's Studio, a cool metallic Mark renders live behind your words at every size, and Auto ink picks light or dark type for each line from the Mark's own palette, so silver surfaces stay readable without you checking each format.
Questions people ask
What is a good silver gradient code?
Try linear-gradient(135deg, #5f6670, #c9cfd6, #f7f9fb, #a7afb9, #4b525c). It runs from gunmetal through light silver to a near white highlight and back.
What hex codes make metallic silver?
A combination such as #4b525c, #5f6670, #a7afb9, #c9cfd6 and #f7f9fb. Each leans very slightly blue, which keeps it from looking like plain grey.
How do I make a brushed metal effect in CSS?
Use a repeating linear gradient with tiny stops a pixel or two apart in close greys, such as repeating-linear-gradient(90deg, #b9bec5 0px, #d3d7dc 1px, #aeb3ba 2px, #c8ccd2 4px).
Why does my silver gradient look grey?
It probably lacks contrast and a highlight. Add a darker gunmetal stop, a narrow near white band and a faint cool tint to every stop.
What is the difference between silver and platinum gradients?
In design, platinum is usually a slightly cooler, brighter silver with a whiter highlight, while pewter is a darker, warmer silver grey.
What background colour makes silver look best?
Dark grounds such as black, charcoal, deep navy or midnight blue. Silver on white or pale grey loses its highlight and tends to look flat and washed out.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile