The short version
- A blue gradient blends shades of blue, often with a neighbouring teal, cyan or violet, from pale ice to deep navy.
- Blue is widely associated with calm, reliability and technology, which makes it popular and easy to confuse with everyone else's.
- Blue blends cleanly towards teal, cyan, indigo and violet, but tends to go grey when blended directly towards orange or yellow.
- White text works on deep and mid blues such as #1e3a8a and #2563eb, but fails on lighter blues such as #3b82f6 for body text.
- Leaning a blue gradient towards teal or violet, going deeper or paler and adding a warm accent are the quickest ways to escape the corporate look.
On this page
A blue gradient blends shades of blue, often with a neighbouring teal, cyan or violet. It can feel like a clear sky, a deep ocean, a screen at night or a bank's annual report, depending on which blues you choose and how you use them. Below are twenty blue gradient palettes with copyable CSS, grouped from the palest to the darkest, followed by the text colours that work on them and how to keep blue from feeling bland.
Light blue gradients: ice and sky
Pale blue gradients feel open, clean and quiet. They suit healthcare, travel, wellness and product pages that need space. Use dark ink on them, and add a hint of warmth or lilac so they don't look cold and clinical.
Ocean and teal blue gradients
Leaning blue towards green gives it life. Ocean gradients feel fresh and natural, and they sidestep the corporate associations of pure blue. They suit travel, food, sustainability and outdoor brands.
Bright and electric blue gradients
Saturated blues are energetic and technical. They suit launches, apps, sport and events. They are also the most common blues on the web, so they benefit most from an unexpected shape or a warm accent.
Dark blue and midnight gradients
Deep navy and midnight gradients feel serious, premium and calm. They are excellent grounds for white type and for bright accents. Watch for banding, which shows easily in slow, dark blues; a fine grain fixes it. See gradient banding.
Which blue gradient for which job
Twenty palettes is a lot to choose from. Start from the job the design has to do and the words it has to carry, then pick from the matching group.
| Job | Try | Why |
|---|---|---|
| Calm product or health page | 1, 3, 4 | Pale, open, easy under dark text |
| Travel, food, outdoors | 6, 8, 10 | Blue leaning green feels natural |
| App launch or tech event | 11, 13, 15 | Saturated and lit, reads as energy |
| Premium or finance | 16, 17, 19 | Deep grounds feel serious and hold white type |
| Something memorable | 2, 14, 20 | A warm note makes blue feel specific |
What blue signals, and the blandness problem
In much of the world, blue is associated with calm, reliability and depth, partly because of sky and water. That is why it is so common in banking, insurance, healthcare and technology. It is also why a mid-blue gradient rarely helps anyone recognise you: it looks like the category rather than the company. Colour psychology explains why convention cuts both ways.
Corporate blue
- One mid blue to a lighter blue at 135 degrees
- Pure, fully saturated primary blue
- Smooth and flat, no texture
- Blue everywhere, nothing warm
Distinctive blue
- Leaning towards teal, indigo or violet
- Very deep or very pale, not the middle
- Grain, sheen or a soft glow
- One warm accent: coral, gold or apricot
Blue blends well towards its neighbours: teal, cyan, indigo and violet. It blends badly towards its opposites. Blue straight into orange or yellow passes through a greyish middle, so keep warm accents short or route them through violet or pink. Complementary colours explains why.
Text on blue gradients
| Text on background | Contrast | Verdict |
|---|---|---|
White on #0b1437 | 18.0:1 | Excellent |
White on #1e3a8a | 10.4:1 | Excellent |
White on #2563eb | 5.2:1 | Fine for body text |
White on #3b82f6 | 3.7:1 | Large text only |
#0b1a33 on #60a5fa | 6.8:1 | Dark ink works here |
#0b1a33 on #bae6fd | 13.1:1 | Excellent |
The trap is the middle of the blue range: a bright cornflower like #3b82f6 looks strong enough for white text but falls below 4.5:1. On a gradient, check contrast where the blue is lightest behind your words. Text on a gradient has the full method.
A deep field makes one number do all the talking.
A calmer story with plenty of open space.
.hero {
background-color: #0b1437;
background-image: linear-gradient(180deg, #0a1628 0%, #13315c 55%, #d97757 100%);
color: #ffffff;
}Exporting a blue gradient as an image for social media needs one extra step. Platforms recompress uploads, and slow, dark blues are among the first colours to break into visible bands. Export at the platform's recommended size, add a fine grain before you save and use PNG where the platform accepts it. Grainy gradients shows how much grain is enough.
For purples next door to blue, see purple gradients; for greener options, see green gradients.
Questions people ask
What colours go well with blue in a gradient?
Teal, cyan, indigo and violet blend cleanly with blue. Warm colours like coral and gold make good accents if kept short, because blending blue straight into orange or yellow turns grey.
What is a good CSS code for a blue gradient?
For a deep, calm blue try linear-gradient(180deg, #020617 0%, #0b1437 50%, #1e3a8a 100%). Every palette on this page can be copied as CSS.
Is white text readable on a blue gradient?
On deep and mid-dark blues, yes. On lighter blues such as #3b82f6, white text falls below the 4.5:1 ratio recommended for body text.
How do I make a blue gradient look less corporate?
Lean it towards teal or violet, choose very deep or very pale blues instead of mid blue, add grain and use a small warm accent.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile
