How do I make a blue gradient background in CSS?

Apply linear-gradient() to the background of an element that fills the viewport, for example body { background: linear-gradient(135deg, #0F4C81 0%, #3B82B8 100%); min-height: 100vh; }.

Does a blue gradient background work for a landing page hero?

Yes — Studio Cobalt and Navy Velvet are tuned specifically for hero sections behind white headlines. They sweep from a deep anchor to a lighter mid-tone, which leads the eye toward the CTA.

How do I keep the gradient looking smooth without banding?

Use stops that share a hue family (within 30° on the HSL wheel), keep the gradient size to the surface width rather than the whole page, and prefer 8-bit sRGB hex codes. If banding still appears, add a 5–10% noise PNG overlay at low opacity.

Can I animate a blue gradient background?

Yes, but animate background-position on a 200%-wide gradient rather than transitioning the gradient itself — CSS cannot interpolate gradient stops, but it can pan a long gradient smoothly.

What is the most readable blue gradient for body text?

Sky Linen and Powder Daylight stay light enough that #1d1d1f body text reads at WCAG AAA across the entire surface. They are the safest choice for long-form pages.

Gradient library · Blue background

Blue gradient background CSS.

Ten blue gradient backgrounds for hero sections, full-page surfaces, marketing pages, and product UI. Each preset is built for legibility under white or dark headlines — copy the CSS and ship.

Studio Cobalt · #0B2A4A → #0F4C81 → #3B82B8

The hex codes.

Five anchor colors that show up across every preset in this library. Copy any one to use it directly.

Anchor dark
Marine Ink
#0B2A4A
Mid dark
Cobalt
#0F4C81
Mid
Studio Blue
#3B82B8
Tint
Powder Sky
#7DD3FC
Accent
Atlantic Teal
#14B8A6

The preset library.

Copy the CSS in one tap, or open any preset in the generator to adjust angle, stops, and type.

Studio Cobalt
Hero background · linear · 135°
- #0B2A4A· 0%
- #0F4C81· 55%
- #3B82B8· 100%
```
background: linear-gradient(135deg, #0B2A4A 0%, #0F4C81 55%, #3B82B8 100%);
```
Open in gradient generator →
Sky Linen
Full-page surface · linear · 180°
- #E0F2FE· 0%
- #7DD3FC· 100%
```
background: linear-gradient(180deg, #E0F2FE 0%, #7DD3FC 100%);
```
Open in gradient generator →
Navy Velvet
Dark hero · linear · 200°
- #0C1B33· 0%
- #1E40AF· 100%
```
background: linear-gradient(200deg, #0C1B33 0%, #1E40AF 100%);
```
Open in gradient generator →
Cerulean Wash
Card panel · linear · 90°
- #0EA5E9· 0%
- #1D4ED8· 100%
```
background: linear-gradient(90deg, #0EA5E9 0%, #1D4ED8 100%);
```
Open in gradient generator →
Atlantic Teal
Marketing section · linear · 160°
- #0F4C5C· 0%
- #14B8A6· 100%
```
background: linear-gradient(160deg, #0F4C5C 0%, #14B8A6 100%);
```
Open in gradient generator →
Powder Daylight
Light marketing hero · linear · 180°
- #F0F9FF· 0%
- #93C5FD· 100%
```
background: linear-gradient(180deg, #F0F9FF 0%, #93C5FD 100%);
```
Open in gradient generator →
Royal Field
Brand surface · linear · 135°
- #1E3A8A· 0%
- #60A5FA· 100%
```
background: linear-gradient(135deg, #1E3A8A 0%, #60A5FA 100%);
```
Open in gradient generator →
Twilight Spotlight
Spotlight card · radial
- #3B82F6· 0%
- #0B2A4A· 100%
```
background: radial-gradient(circle at center, #3B82F6 0%, #0B2A4A 100%);
```
Open in gradient generator →
Glacier Ink
Dashboard background · linear · 110°
- #1E293B· 0%
- #0284C7· 100%
```
background: linear-gradient(110deg, #1E293B 0%, #0284C7 100%);
```
Open in gradient generator →
Marine Wheel
Decorative ring · conic · 0°
- #0F4C81· 0%
- #14B8A6· 33%
- #7DD3FC· 66%
- #0F4C81· 100%
```
background: conic-gradient(from 0deg at center, #0F4C81 0%, #14B8A6 33%, #7DD3FC 66%, #0F4C81 100%);
```
Open in gradient generator →

Blues

How to use this gradient family.

Why blue gradient backgrounds dominate the web.

Blue is the most trusted hue across cultures and the easiest to read white text against, which is why every category from banking to enterprise SaaS to healthcare reaches for it. A blue gradient background takes that trust signal and adds depth: the eye registers it as a surface rather than a flat color, and the implied light direction makes the layout feel three-dimensional. Pair a deep navy anchor (#0B2A4A) with a brighter cobalt (#0F4C81) and you have a hero background that holds attention without competing with the headline.

Choosing the right blue for the surface.

Full-page backgrounds want the gentlest gradients — Sky Linen and Powder Daylight stay close to a single hue and let copy lead. Hero sections want directional movement — Studio Cobalt and Navy Velvet sweep from dark to lighter and pull the eye toward the headline. Cards and product UI want short, contained gradients — Cerulean Wash and Glacier Ink give surface depth without dominating. Marketing accents can afford louder moves — Atlantic Teal and Royal Field cover more spectrum and read as energetic.

Getting WCAG-clean text on a blue background.

Test text contrast against the lightest stop of the gradient, not the darkest. Studio Cobalt, Navy Velvet, and Twilight Spotlight all hold white text at WCAG AAA. Sky Linen and Powder Daylight require dark ink (#1d1d1f) — never light gray — for body copy to pass AA. If you need both light and dark text in the same layout, split the gradient across the fold and pin each text block to the matching half.

How to use the blues gradient library.

Step 1
Pick a preset
Choose the blue background preset that matches the surface — hero, full page, or card.
Step 2
Copy the CSS
Tap copy to grab the gradient declaration for your stylesheet.
Step 3
Set the surface
Apply the gradient to a container with min-height set to fill the viewport, then layer headline and body text on top.

Frequently asked questions.

How do I make a blue gradient background in CSS?: Apply linear-gradient() to the background of an element that fills the viewport, for example body { background: linear-gradient(135deg, #0F4C81 0%, #3B82B8 100%); min-height: 100vh; }.
Does a blue gradient background work for a landing page hero?: Yes — Studio Cobalt and Navy Velvet are tuned specifically for hero sections behind white headlines. They sweep from a deep anchor to a lighter mid-tone, which leads the eye toward the CTA.
How do I keep the gradient looking smooth without banding?: Use stops that share a hue family (within 30° on the HSL wheel), keep the gradient size to the surface width rather than the whole page, and prefer 8-bit sRGB hex codes. If banding still appears, add a 5–10% noise PNG overlay at low opacity.
Can I animate a blue gradient background?: Yes, but animate background-position on a 200%-wide gradient rather than transitioning the gradient itself — CSS cannot interpolate gradient stops, but it can pan a long gradient smoothly.
What is the most readable blue gradient for body text?: Sky Linen and Powder Daylight stay light enough that #1d1d1f body text reads at WCAG AAA across the entire surface. They are the safest choice for long-form pages.