White gradient
White gradients are almost invisible on purpose: white to a faint tinted grey, or white fading to transparent over a photo. They add depth to cards and sections without adding colour. Below are 12 white gradients — copy the CSS, download a PNG, or open one in the editor.
Quick copy — white to grey:
background: linear-gradient(180deg, #ffffff 0%, #fdfdfd 8.3%, #fbfbfb 16.7%, #f9f9fa 25%, #f7f7f8 33.3%, #f5f5f6 41.7%, #f2f3f4 50%, #f0f2f3 58.3%, #eef0f1 66.7%, #eceeef 75%, #eaeced 83.3%, #e8eaec 91.7%, #e6e8ea 100%);
background: linear-gradient(in oklch 180deg, #ffffff 0%, #e6e8ea 100%);- Aa · 15.3:1
Black text: Passes AA
- Aa · 16.2:1
Black text: Passes AA
- Aa · 16.1:1
Black text: Passes AA
- Aa · 16.9:1
Black text: Passes AA
- Aa · 15.6:1
Black text: Passes AA
- Aa · 16.1:1
Black text: Passes AA
- Aa · 14.8:1
Black text: Passes AA
- Aa · 16.7:1
Black text: Passes AA
- Aa · 16.7:1
Black text: Passes AA
- Aa · 14.8:1
Black text: Passes AA
- Aa · 16.2:1
Black text: Passes AA
- Aa · 14.0:1
Black text: Passes AA
Using white gradients well
Good for: card and section backgrounds, light-mode surfaces, fade-outs at the end of scroll areas, overlays that lift text off a photo.
Pairing: Tint the second stop very slightly toward your brand hue (blue, pink, green) so the page feels designed rather than grey. To fade white over an image, end on transparent white, not on the keyword transparent.
Readable text: Every white gradient here carries black or dark grey text at well above 4.5:1. White text on white gradients never passes. 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 white gradient?
A simple white gradient is background: linear-gradient(in oklch 180deg, #ffffff 0%, #e6e8ea 100%); Copy any gradient on this page for ready CSS, including a fallback for older browsers.
What colours go well with white in a gradient?
Tint the second stop very slightly toward your brand hue (blue, pink, green) so the page feels designed rather than grey. To fade white over an image, end on transparent white, not on the keyword transparent.
What text colour is readable on a white gradient?
Every white gradient here carries black or dark grey text at well above 4.5:1. White text on white gradients never passes. 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 white 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 white gradients typically used?
Common uses: card and section backgrounds, light-mode surfaces, fade-outs at the end of scroll areas, overlays that lift text off a photo.