CSS gradient

Blue Gradient

A three-stop blue gradient from pale sky blue through vivid blue to deep navy.

Useful for cool hero backgrounds, charts, cards, and decorative interface accents.

Blue gradients can stay within one hue family while creating depth through lightness and saturation, which makes them easier to control than distant-hue transitions.

Gradient stops

Sky #93C5FD 0%

Blue #2563EB 52%

Navy #1E3A8A 100%

CSS

.example {
  background: linear-gradient(135deg, #93C5FD 0%, #2563EB 52%, #1E3A8A 100%);
}

Gradient contrast varies across the surface. Test important text against every area it may overlap instead of relying on a single midpoint color.

Angle previews

90°

135°

180°

Ready-to-use variations

Sky to ocean

Bright vertical progression for large surfaces.

linear-gradient(180deg, #BAE6FD 0%, #38BDF8 45%, #0369A1 100%)

Product blue

Balanced saturated blue for product artwork.

linear-gradient(135deg, #60A5FA 0%, #2563EB 50%, #1E3A8A 100%)

Blue gray

Lower-saturation alternative for restrained UI.

linear-gradient(120deg, #CBD5E1 0%, #64748B 50%, #1E293B 100%)

Tuning tips

A darker end does not guarantee white-text contrast across the whole gradient.
Use stop positions to control where the visual emphasis sits.
For buttons, a solid fill is often easier to keep accessible than a moving gradient.