Gold gradient
A flat yellow can’t look metallic. Gold comes from a gradient: dark bronze to a bright highlight and back, imitating light on a curved surface. Below are 12 gold gradients — copy the CSS, download a PNG, or open one in the editor.
- Aa · 3.7:1
White text: Fails AA — large text only (3:1)
- Aa · 2.8:1
Black text: Fails AA — no plain text
- Aa · 4.5:1
Black text: Passes AA
- Aa · 5.1:1
Black text: Passes AA
- Aa · 12.3:1
Black text: Passes AA
- Aa · 9.2:1
White text: Passes AA
- Aa · 5.2:1
Black text: Passes AA
- Aa · 1.7:1
Black text: Fails AA — no plain text
- Aa · 1.9:1
White text: Fails AA — no plain text
- Aa · 3.1:1
Black text: Fails AA — large text only (3:1)
- Aa · 3.8:1
Black text: Fails AA — large text only (3:1)
- Aa · 4.9:1
White text: Passes AA
Using gold gradients well
Good for: awards and badges, luxury and premium tiers, wedding and event themes, logos.
Pairing: Run bronze → pale gold → bronze for a metallic band. Pair gold with deep navy, black or burgundy.
Readable text: The light band of a gold gradient needs dark text; place white text only over the bronze ends and check the worst point. The ratio on each swatch is the worst point across the gradient (WCAG 2: 4.5:1 for body text, 3:1 for large text). Check custom pairs in the contrast checker.
These gradients are blended in OKLCH so the middle stays clean; the copied CSS includes a pre-blended fallback line for older browsers.
Questions
What is the CSS code for a gold gradient?
A simple gold gradient is background: linear-gradient(in oklch 135deg, #ae7c00 0%, #664700 100%); Copy any gradient on this page for ready CSS, including a fallback for older browsers.
What colours go well with gold in a gradient?
Run bronze → pale gold → bronze for a metallic band. Pair gold with deep navy, black or burgundy.
What text colour is readable on a gold gradient?
The light band of a gold gradient needs dark text; place white text only over the bronze ends and check the worst point. Each swatch on this page shows the better of black or white text, its worst-case WCAG contrast ratio, and whether it passes AA (4.5:1), is only good for large text (3:1), or fails — for failing swatches, add a darker scrim behind the text or pick a deeper variant.
How do I download a gold gradient image?
Press “PNG” under any gradient to download a 1600×900 image, rendered in your browser. Open it in the editor to change size-independent details first, such as angle or colours.
Where are gold gradients typically used?
Common uses: awards and badges, luxury and premium tiers, wedding and event themes, logos.