Gold gradient
Gold is not a color so much as a behaviour: yellow that gets darker and warmer at the same time, the way metal turns away from the light. A flat yellow rectangle never reads as gold. The gradient is what supplies the shine, which is why gold is the one color people search for as a gradient more than as a swatch.
5gold gradients, ready to use
Every version here darkens toward brown rather than toward grey, because darkened yellow drifts olive unless the red channel is held up. The champagne and antique versions borrow their stops from the metals row of the color library. Against black, gold reads most metallic of all; that pairing is the last one below.
Champagne
linear-gradient(180deg, #F7E7CE, #FFD700)
In the color library: champagne #F7E7CE, gold #FFD700
Bronze age
linear-gradient(135deg, #FFD700, #CD7F32)
In the color library: gold #FFD700, bronze #CD7F32
Gold on black
linear-gradient(135deg, #0F0F0F, #FFD700)
The pairing that reads most like metal, because the dark field plays the part of shadow.
In the color library: gold #FFD700
Common questions
- What colors make a gold gradient?
- Run a true gold like #FFD700 into a dark goldenrod or bronze such as #B8860B or #CD7F32. The dark stop must stay warm: darkening yellow without holding red and a little green produces olive, which is the usual reason a homemade gold gradient looks wrong.
- How do I make gold text in CSS?
- Paint the gradient onto the text itself: set the background to a gold gradient, then background-clip: text with a transparent text color. The letterforms become the gradient, which is what makes type look plated rather than merely yellow.
- Why does gold need a gradient at all?
- Because gold is a material, not a hue. What the eye recognises as metal is the variation, bright where light lands and darker where it turns away. A gradient is the cheapest possible imitation of that behaviour, and it is usually enough.