Yellow gradient
Yellow is the brightest hue at full saturation, cheerful and optimistic. It has very little room to get darker before it turns olive, so yellow gradients usually travel toward orange or green. Below are 12 yellow gradients — copy the CSS, download a PNG, or open one in the editor.
- Aa · 3.6:1
White text: Fails AA — large text only (3:1)
- Aa · 2.9:1
Black text: Fails AA — no plain text
- Aa · 4.6:1
Black text: Passes AA
- Aa · 5.1:1
Black text: Passes AA
- Aa · 12.5:1
Black text: Passes AA
- Aa · 9.1:1
White text: Passes AA
- Aa · 5.3: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.2:1
Black text: Fails AA — large text only (3:1)
- Aa · 3.9:1
Black text: Fails AA — large text only (3:1)
- Aa · 4.8:1
White text: Passes AA
Using yellow gradients well
Good for: highlight banners, children’s and education brands, summer themes, warning states.
Pairing: Yellow → orange and yellow → lime are smooth. For contrast, set yellow against deep navy or near-black.
Readable text: Yellow almost never works with white text — use near-black, which typically passes AAA. 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 yellow gradient?
A simple yellow gradient is background: linear-gradient(in oklch 135deg, #9e8400 0%, #5c4c00 100%); Copy any gradient on this page for ready CSS, including a fallback for older browsers.
What colours go well with yellow in a gradient?
Yellow → orange and yellow → lime are smooth. For contrast, set yellow against deep navy or near-black.
What text colour is readable on a yellow gradient?
Yellow almost never works with white text — use near-black, which typically passes AAA. 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 yellow 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 yellow gradients typically used?
Common uses: highlight banners, children’s and education brands, summer themes, warning states.