# Chrome text effect: metallic type and backgrounds

[Canonical HTML page](https://gradiently.design/guide/chrome-effect)

Chrome is not grey. It is a mirror of the world around it, squeezed onto the surface of a letter. Once you understand that, convincing chrome type takes one gradient and a few minutes.

## The short version

- A chrome text effect imitates polished metal, which reflects its surroundings rather than having a colour of its own.
- Convincing chrome gradients show a light sky above a sharp horizon line and a dark ground below, with a brighter highlight near the bottom.
- In CSS, chrome text is a linear gradient clipped to the letters with background-clip: text and a transparent text fill.
- Chrome works best on heavy, wide display type at large sizes, and poorly on thin or small text.
- Tinting the sky part of the gradient blue, pink or violet changes chrome from industrial to retro or Y2K.

A **chrome text effect** works because polished metal has almost no colour of its own: it mirrors its surroundings. On a shiny letter you see a pale sky in the top half, a sharp dark horizon across the middle, and a ground that brightens again towards the bottom edge. Put those bands into one gradient with a hard break at the horizon, clip it to heavy type, and you have chrome. A smooth grey fade, which is what most people try first, just looks like grey.

## How chrome reflects light

Picture a chrome bumper outdoors. The upper curve reflects the sky, so it is pale and often slightly blue. Where the surface turns to face the ground, the reflection switches abruptly to the dark landscape: that is the horizon line, and it is the single most important detail. Below it, the ground reflection lightens as the curve turns back up, ending in a bright rim highlight.

- **Sky band:** pale, cool, getting lighter towards the top.
- **Horizon:** a hard step from light to dark just below the middle. No soft blend.
- **Ground band:** dark at the horizon, warming or lightening downwards.
- **Rim highlight:** a thin bright line near the bottom edge.
- **Outline:** a dark edge around each letter separates the metal from the background.

## Chrome gradients you can copy

- Classic chrome: `linear-gradient(180deg, #ffffff 0%, #dfe6ee 22%, #a9b4c2 47%, #2a2e36 49%, #4a4f59 62%, #b9bec6 86%, #f4f6f8 92%, #7d838d 100%)`
- Sky chrome: `linear-gradient(180deg, #f2f8ff 0%, #b8d4f2 25%, #6d93c4 48%, #1d2533 50%, #3b3a45 64%, #c9b8a8 88%, #fff4e6 94%, #8a7f78 100%)`
- Y2K liquid chrome: `linear-gradient(180deg, #fdf2ff 0%, #e4c6f5 22%, #9fb7f0 48%, #2b2142 49%, #4c3a6b 62%, #f0a8d0 86%, #fff0f8 92%, #8a6f9a 100%)`
- Dark chrome: `linear-gradient(180deg, #9aa3ad 0%, #5d6670 49%, #0d0f12 50%, #1c2026 70%, #6e7782 92%, #2a2f36 100%)`
- Chrome disc background: `conic-gradient(from 20deg at 50% 50%, #e6e9ed, #6b7280, #f8fafc, #4b5563, #e5e7eb, #8b939e, #f1f3f5, #5b636e, #e6e9ed)`

Four type gradients and one background. Notice the near jump in each type gradient around 48 to 50%: that hard horizon is what reads as metal.

The tinted versions are where chrome gets interesting. A blue sky gives the classic car badge look; pinks and violets push it into Y2K, which leaned heavily on liquid chrome. [Y2K aesthetic](https://gradiently.design/guide/y2k-aesthetic) covers that era, and [silver gradient](https://gradiently.design/guide/silver-gradient) has softer, satin metals for when mirror chrome is too much.

## Chrome text in CSS

The technique is gradient text: paint a gradient as the element's background, clip it to the letter shapes and make the text fill transparent. A hard offset shadow, applied with `filter` rather than `text-shadow` so it sits behind the clipped gradient, gives the letters weight. [Gradient text](https://gradiently.design/guide/css-gradient-text) explains the method and its browser support in more depth.

```css
.chrome {
  font-family: "Rubik Mono One", system-ui, sans-serif;
  font-size: clamp(3rem, 12vw, 9rem);
  line-height: 1;
  color: #a9b4c2; /* fallback where clipping is unsupported */
  background: linear-gradient(
    180deg,
    #ffffff 0%, #dfe6ee 22%, #a9b4c2 47%,
    #2a2e36 49%, #4a4f59 62%,
    #b9bec6 86%, #f4f6f8 92%, #7d838d 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #1b1e24;
  filter: drop-shadow(0 4px 0 #1b1e24);
}
```

Classic chrome type. The gradient spans the line box, so keep `line-height` at 1 or the horizon drifts away from the middle of the letters.

## Chrome text in a design app

1. **Set the word first** Type one short word in a heavy display face at a large size. Convert it to outlines only if your app can't fill live text with a gradient.
2. **Apply a vertical gradient fill** Use the stops from Classic chrome above. Make sure the gradient runs from the top of the letters to the bottom, not across the whole canvas.
3. **Sharpen the horizon** Drag the light and dark stops at the middle almost on top of each other. If it still looks soft, move them closer.
4. **Add the edge and the weight** A one or two pixel dark stroke, then a hard shadow offset straight down. Skip blurred shadows and outer glows.

## Fonts that suit chrome

Chrome needs surface area. Thin strokes have no room for sky, horizon and ground, so the effect collapses into a grey line. Choose heavy, wide, ideally rounded or bevel friendly faces, and set them big.

| Font | Character | Best for |
| --- | --- | --- |
| Rubik Mono One | Heavy, wide, rounded corners | Logos, single words |
| Bungee | Signage, blocky, upright | Posters, event titles |
| Michroma | Wide, technical, futurist | Tech and motorsport |
| Monoton | Inline neon style, retro | Eighties and disco looks |

Four free display faces on Google Fonts that hold a chrome gradient well. All are display fonts: never use them for body text.

For more options, [display fonts](https://gradiently.design/guide/display-fonts) lists heavy faces by mood, and [retro text effect](https://gradiently.design/guide/retro-text-effect) pairs chrome with outlines and extrusion for a full eighties treatment.

## Getting chrome right

### Looks fake

- A smooth fade from light grey to dark grey
- Horizon placed at the very top or bottom
- Chrome on thin or small text
- No outline, so letters melt into the background
- Soft glow halos around the letters

### Looks like metal

- A hard horizon step just below the middle
- Light sky above, dark ground below
- Heavy display type at headline sizes
- A thin dark outline and a hard offset shadow
- A plain dark or gradient background with room around the word

Use chrome for one word or a short title, never a paragraph. It is a headline treatment for album covers, event posters, merch, gaming channels and nostalgic campaigns. Against a busy background it disappears, so give it a calm, darker surface.

A square album cover with the single word TURBO in heavy capitals on a dark surface

One heavy word on a dark surface: the setting chrome type needs to read as metal.

A vertical club night story titled Night Drive with a short plain detail line underneath

A vertical story where a short title carries the shine and the detail stays plain and readable.

In Gradiently, lettering treatments such as Extrude, Inline and Contour give headline type depth, an engraved line or an outline on top of a living Mark, which suits metallic looks well, and the Mark keeps its calmest area behind the words so a shiny title is never fighting a busy background. For iridescent shine rather than mirror metal, see [holographic gradient](https://gradiently.design/guide/holographic-gradients).

## FAQ

### How do I make a chrome text effect?

Use a vertical gradient with a pale sky band, a hard dark horizon just below the middle and a lighter ground band, then clip it to heavy type and add a thin dark outline.

### How do I make chrome text in CSS?

Set a chrome linear gradient as the background, then use `background-clip: text` with `-webkit-text-fill-color: transparent`. Add `filter: drop-shadow()` for a hard offset shadow.

### What colours make a chrome gradient?

Near white, pale blue grey, a very dark charcoal at the horizon, mid grey, and a bright highlight near the bottom. Tint the sky blue, pink or violet for retro versions.

### Which fonts work best for chrome text?

Heavy, wide display fonts such as Rubik Mono One, Bungee or Michroma, set large. Thin fonts have no room for the reflection to show.

### What is the difference between chrome and silver?

Chrome is a mirror, with a sharp horizon reflection and strong contrast. Silver in design is usually softer and satin, with gentler transitions.