The short version
- A realistic gold gradient runs from a deep brown shadow through a muted ochre midtone to a pale cream highlight, then back to shadow.
- Gold looks orange when its colours are too saturated and too red, and looks like flat yellow when it lacks a dark shadow and a near white highlight.
- Metallic gold depends on contrast: the darkest and lightest stops should be far apart in brightness, with the highlight kept narrow.
- In CSS, gold text is a gold linear gradient clipped to the letters with background-clip: text.
- Gold looks most precious used sparingly, on a dark ground such as black, navy or deep green.
On this page
A gold gradient looks like real metal when it covers a wide range of brightness: a deep brown shadow, a muted ochre middle, a narrow pale cream highlight, and back down to brown. The classic code to start from is linear-gradient(135deg, #5c3d12, #b8862b, #f3dc9a, #c79a3c, #7a5418). Most gold gradients fail because they use two bright yellows and oranges with no real shadow or highlight, which reads as orange paint rather than metal.
Gold gradient codes you can copy
Why your gold gradient looks orange
On screens, gold is an illusion made from contrast. There is no gold pixel, only browns and yellows arranged so the eye reads a reflective surface. When something goes wrong, it usually goes wrong in one of four ways.
Fix
Why
Fix
Why
Fix
Fix
The orange problem is the most common because the yellow you pick in a colour picker often looks too pale, so people push it warmer. Resist: keep the midtone hue around ochre, roughly where yellow meets brown, and let contrast provide the shine. If a plain warm blend is what you actually want, yellow gradient and orange gradient cover those directly.
How to light gold so it looks real
- 1
Start from the shadow
Pick a deep, warm brown. It should be dark enough that white text would read on it.
- 2
Add one muted midtone
An ochre gold, slightly desaturated. This is the colour people will remember, so most of the surface sits here.
- 3
Place a narrow highlight
A pale cream in a thin band, off centre. The narrower it is, the shinier the metal looks.
- 4
Return to shadow
Fall back to a darker ochre after the highlight, so the light reads as a reflection on a curved surface.
- 5
Add a second, weaker highlight
Optional: a softer lift near the far end, as if a second light catches the edge. It makes flat shapes feel rounded.
Gold reflects like any polished metal, so the same logic behind chrome text effect applies, only warmer and with softer transitions. Gold gradients with long, subtle runs can show banding after compression; gradient banding explains how a fine grain prevents it.
Gold text in CSS
.gold {
font-family: "Cormorant Garamond", Georgia, serif;
font-weight: 700;
font-size: clamp(2.5rem, 8vw, 6rem);
color: #c79a3c; /* fallback */
background: linear-gradient(
135deg,
#5c3d12 0%, #b8862b 22%, #f3dc9a 45%,
#c79a3c 58%, #7a5418 80%, #d6b062 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.gold-rule {
height: 2px;
border: 0;
background: linear-gradient(90deg, transparent, #b8862b 20%, #f3dc9a 50%, #b8862b 80%, transparent);
}Gold gradients suit serif and high contrast type at large sizes. Below about 24 pixels the shadow and highlight blur into an even brown, so set small text in a solid gold tone like #c79a3c instead, and check its contrast against the background. Gradient text covers browser support for the clipping technique.
Gold gradients in print
A gold gradient is a picture of metal, not metal. Printed in ordinary four colour ink it comes out as browns and yellows that suggest shine, which is fine for flyers and posters but never truly reflective. For invitations, business cards and packaging where real shine matters, printers use metallic inks or foil stamping, and you supply the gold area as a separate flat shape in the artwork.
If you do print a gradient, expect it to come out slightly darker and less vivid than on screen. Brighten the highlight a touch, avoid very long subtle runs that can band, and ask for a proof before a large print run.
Designing with gold
Gold reads as precious when it is rare. A thin border, a monogram, one word in a headline, a divider line: on a dark ground of black, navy, oxblood or deep green. Cover a whole poster in gold and it turns brassy. Black and gold gradient has pairings for the most classic combination, and luxury brand design shows how gold fits into a restrained identity.
A 5×7 inch invitation: a dark ground with warm metallic light, and words set in calm cream.
A jewellery post where gold appears only as light on the surface, never as a large flat fill.
For a warm look that lives behind every design rather than being rebuilt each time, search Gradiently's Market with colour words such as "warm gold" or "bronze". Each Mark is a living background with light and grain, which can have only one owner at a time and keeps its calmest area behind your words at every size.
Questions people ask
What is the best gold gradient code?
A good starting point is linear-gradient(135deg, #5c3d12, #b8862b, #f3dc9a, #c79a3c, #7a5418): brown shadow, ochre midtone, pale highlight and back to shadow.
What hex codes make a metallic gold?
Combine a dark bronze like #5c3d12, an old gold like #b8862b, a metallic gold like #c79a3c and a pale highlight like #f3dc9a.
Why does my gold gradient look orange?
The midtones are too red and saturated. Shift them towards yellow ochre, lower the saturation, and add a dark brown shadow and pale cream highlight for contrast.
How do I make gold text in CSS?
Apply a gold linear gradient as the background, then use background-clip: text and -webkit-text-fill-color: transparent, with a solid gold color as a fallback.
What colour goes best with gold?
Black, navy, deep green, oxblood and warm cream. Dark grounds make gold look brightest and most precious.
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