# Silver gradient: metallic codes and how to light them

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

The difference between silver and plain grey is light. Here are six silver gradients you can copy, the four rules that make them read as metal, and CSS for text, buttons and brushed surfaces.

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

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

- Polished silver: `linear-gradient(135deg, #5f6670 0%, #c9cfd6 28%, #f7f9fb 44%, #a7afb9 58%, #4b525c 82%, #9aa2ac 100%)`
- Satin silver: `linear-gradient(160deg, #8d939b 0%, #c3c8ce 35%, #e4e7ea 55%, #b5bbc2 75%, #8a9098 100%)`
- Brushed silver: `repeating-linear-gradient(90deg, #b9bec5 0px, #d3d7dc 1px, #aeb3ba 2px, #c8ccd2 4px)`
- Cool platinum: `linear-gradient(135deg, #6f7680 0%, #d6dce4 30%, #fbfdff 45%, #b9c3cf 60%, #56606c 100%)`
- Warm pewter: `linear-gradient(135deg, #4f4c48 0%, #a39f99 30%, #e3e0da 46%, #9b968f 62%, #4a4743 100%)`
- Silver light on black: `radial-gradient(ellipse at 30% 20%, #e9edf1 0%, #8f97a1 22%, #2b3038 52%, #0c0e11 85%)`

Six silvers: four for type, borders and shapes, one brushed surface and one background. Each has a dark stop and a near white highlight.

- Shadow steel: #4b525c
- Gunmetal: #5f6670
- Silver: #a7afb9
- Light silver: #c9cfd6
- Highlight: #f7f9fb

The silver colour codes behind Polished silver. Every one leans faintly blue, which is why they read as metal rather than concrete.

## 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](https://gradiently.design/guide/chrome-effect) covers that version. For a warm metal using the same logic, see [gold gradient](https://gradiently.design/guide/gold-gradient-design).

## 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](https://gradiently.design/guide/grey-gradient) and [monochrome gradient](https://gradiently.design/guide/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.

| Finish | How it looks | Use it for |
| --- | --- | --- |
| Polished | Crisp reflections, strong contrast, a bright narrow highlight | Logos, headline type, award graphics |
| Satin | Soft transitions, gentle sheen, little contrast | Large surfaces, packaging, quiet backgrounds |
| Brushed | Fine parallel lines under a soft sheen | Panels, product pages, technical brands |
| Platinum | Cool, bright, almost white highlight | Premium tiers, anniversaries, jewellery |
| Pewter | Darker, warmer, softer | Heritage, craft, menswear |

Five silver finishes and where each one belongs. All are built from the same lighting rules; only contrast, tint and stop spacing change.

## Silver text and buttons 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);
}
```

Silver headline text, a pill button with a split reflection, and a brushed metal panel. The button's dark text keeps its label readable.

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](https://gradiently.design/guide/css-gradient-button) has more button patterns, and [gradient text](https://gradiently.design/guide/css-gradient-text) explains text clipping and its support across browsers.

> **Greys band easily** Long, subtle grey gradients are where banding shows most, especially after a platform compresses your image. Add a fine grain layer and export PNG at full size. [Gradient banding](https://gradiently.design/guide/gradient-banding) explains why.

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

A portrait silver anniversary invitation with cool metallic light and the words Twenty five years

An anniversary invitation where cool, metallic light carries the theme and the words stay calm.

A portrait product post announcing a steel watch on a dark cool background

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](https://gradiently.design/guide/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.

## FAQ

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