Blue gradient
Blue is the most-used colour in interface design: it reads as calm, trustworthy and technical, which is why banks, SaaS products and social networks lean on it. Below are 12 blue 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.6:1
Black text: Passes AA
- Aa · 5.1:1
Black text: Passes AA
- Aa · 12.1:1
Black text: Passes AA
- Aa · 9.4:1
White text: Passes AA
- Aa · 4.8:1
Black text: Passes AA
- Aa · 1.6: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 blue gradients well
Good for: hero backgrounds for fintech and SaaS, ocean and sky themes, dark-mode accents.
Pairing: Pair blue with a warm accent such as amber or coral for call-to-action buttons; analogous blue → violet or blue → teal gradients stay smooth.
Readable text: Deep blues (below about 45% OKLCH lightness) carry white text at 4.5:1 or better; pale sky blues need near-black text. 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 blue gradient?
A simple blue gradient is background: linear-gradient(in oklch 135deg, #3186e9 0%, #004b96 100%); Copy any gradient on this page for ready CSS, including a fallback for older browsers.
What colours go well with blue in a gradient?
Pair blue with a warm accent such as amber or coral for call-to-action buttons; analogous blue → violet or blue → teal gradients stay smooth.
What text colour is readable on a blue gradient?
Deep blues (below about 45% OKLCH lightness) carry white text at 4.5:1 or better; pale sky blues need near-black text. 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 blue 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 blue gradients typically used?
Common uses: hero backgrounds for fintech and SaaS, ocean and sky themes, dark-mode accents.