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.
On this page
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
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 covers that era, and 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 explains the method and its browser support in more depth.
.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);
}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.
Character
Best for
Best for
Best for
Best for
For more options, display fonts lists heavy faces by mood, and 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.
One heavy word on a dark surface: the setting chrome type needs to read as metal.
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.
Questions people ask
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.
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