50+ Stunning Blue Gradients for Your Design Projects

Explore our collection of 50+ stunning blue gradients, perfect for enhancing your design projects. Whether you’re creating websites, mobile apps, or graphic designs, these blue gradients provide a versatile and visually appealing palette. From deep oceanic blues to light sky hues, our curated selection ensures you have the perfect gradient for any context.

Create Your Own Gradient

Electric Blue

#0000ff #7df9ff
Copied!

Electric Blue

✕
background: linear-gradient(to right, #0000ff, #7df9ff);

Aqua Marine

#1e5799 #2989d8
Copied!

Aqua Marine

✕
background: linear-gradient(to right, #1e5799, #2989d8);

Ocean Blue

#0072ff #00c6ff
Copied!

Ocean Blue

✕
background: linear-gradient(to right, #0072ff, #00c6ff);

Blue Lagoon

#4da0b0 #d39d38
Copied!

Blue Lagoon

✕
background: linear-gradient(to right, #4da0b0, #d39d38);

Deep Sea

#4ca1af #c4e0e5
Copied!

Deep Sea

✕
background: linear-gradient(to right, #4ca1af, #c4e0e5);

Blue Ribbon

#00c6ff #0072ff
Copied!

Blue Ribbon

✕
background: linear-gradient(to right, #00c6ff, #0072ff);

Blue Sapphire

#0072ff #00c6ff #0072ff
Copied!

Blue Sapphire

✕
background: linear-gradient(135deg, #0072ff, #00c6ff, #0072ff);

Blue Ice

#71b280 #d9e892
Copied!

Blue Ice

✕
background: linear-gradient(to right, #71b280, #d9e892);

Marine Blue

#006994 #00bcd4
Copied!

Marine Blue

✕
background: linear-gradient(to right, #006994, #00bcd4);

Cerulean Blue

#0072ff #00c6ff #0072ff
Copied!

Cerulean Blue

✕
background: linear-gradient(135deg, #0072ff, #00c6ff, #0072ff);

Skyline Blue

#1488CC #2B32B2
Copied!

Skyline Blue

✕
background: linear-gradient(to right, #1488CC, #2B32B2);

Arctic Dawn

#56CCF2 #2F80ED
Copied!

Arctic Dawn

✕
background: linear-gradient(to right, #56CCF2, #2F80ED);

Blue Horizon

#003973 #E5E5BE
Copied!

Blue Horizon

✕
background: linear-gradient(to right, #003973, #E5E5BE);

Azure Bliss

#00C9FF #92FE9D
Copied!

Azure Bliss

✕
background: linear-gradient(to right, #00C9FF, #92FE9D);

Indigo Sky

#373B44 #4286f4
Copied!

Indigo Sky

✕
background: linear-gradient(to right, #373B44, #4286f4);

Blue Radiance

#3a7bd5 #3a6073
Copied!

Blue Radiance

✕
background: linear-gradient(to right, #3a7bd5, #3a6073);

Oceanic Dream

#2193b0 #6dd5ed
Copied!

Oceanic Dream

✕
background: linear-gradient(to right, #2193b0, #6dd5ed);

Polar Blue

#00d2ff #3a7bd5
Copied!

Polar Blue

✕
background: linear-gradient(to right, #00d2ff, #3a7bd5);

Blue Fusion

#00c3ff #ffff1c
Copied!

Blue Fusion

✕
background: linear-gradient(to right, #00c3ff, #ffff1c);

Frozen Blue

#30cfd0 #330867
Copied!

Frozen Blue

✕
background: linear-gradient(to right, #30cfd0, #330867);

Blueberry

#4facfe #00f2fe
Copied!

Blueberry

✕
background: linear-gradient(to right, #4facfe, #00f2fe);

Blue Coral

#1c92d2 #f2fcfe
Copied!

Blue Coral

✕
background: linear-gradient(to right, #1c92d2, #f2fcfe);

Blue Mist

#3a7bd5 #3a6073
Copied!

Blue Mist

✕
background: linear-gradient(to right, #3a7bd5, #3a6073);

Deep Blue Sea

#2c3e50 #4ca1af
Copied!

Deep Blue Sea

✕
background: linear-gradient(to right, #2c3e50, #4ca1af);

Blue Oasis

#0f2027 #203a43 #2c5364
Copied!

Blue Oasis

✕
background: linear-gradient(to right, #0f2027, #203a43, #2c5364);

Neon Blue

#00c6ff #0072ff
Copied!

Neon Blue

✕
background: linear-gradient(to right, #00c6ff, #0072ff);

Blue Aurora

#00d2ff #928DAB
Copied!

Blue Aurora

✕
background: linear-gradient(to right, #00d2ff, #928DAB);

Blue Velvet

#141E30 #243B55
Copied!

Blue Velvet

✕
background: linear-gradient(to right, #141E30, #243B55);

Misty Blue

#abbaab #ffffff
Copied!

Misty Blue

✕
background: linear-gradient(to right, #abbaab, #ffffff);

Blue Twilight

#3a6186 #89253e
Copied!

Blue Twilight

✕
background: linear-gradient(to right, #3a6186, #89253e);

Tropical Blue

#009FFF #ec2F4B
Copied!

Tropical Blue

✕
background: linear-gradient(to right, #009FFF, #ec2F4B);

Calm Blue

#000046 #1CB5E0
Copied!

Calm Blue

✕
background: linear-gradient(to right, #000046, #1CB5E0);

Blue Dawn

#3a1c71 #d76d77 #ffaf7b
Copied!

Blue Dawn

✕
background: linear-gradient(to right, #3a1c71, #d76d77, #ffaf7b);

Blue Reef

#00B4DB #0083B0
Copied!

Blue Reef

✕
background: linear-gradient(to right, #00B4DB, #0083B0);

Blue Cascade

#485563 #29323c
Copied!

Blue Cascade

✕
background: linear-gradient(to right, #485563, #29323c);

Arctic Blue

#1e3c72 #2a5298
Copied!

Arctic Blue

✕
background: linear-gradient(to right, #1e3c72, #2a5298);

Blue Sunset

#0b486b #f56217
Copied!

Blue Sunset

✕
background: linear-gradient(to right, #0b486b, #f56217);

Blue Sky

#76b2fe #b69efe
Copied!

Blue Sky

✕
background: linear-gradient(to right, #76b2fe, #b69efe);

Blue Wave

#00c3ff #ffff1c
Copied!

Blue Wave

✕
background: linear-gradient(to right, #00c3ff, #ffff1c);

Frozen Dreams

#00c6ff #0072ff #00c6ff
Copied!

Frozen Dreams

✕
background: linear-gradient(to right, #00c6ff, #0072ff, #00c6ff);

Aqua Splash

#13547a #80d0c7c
Copied!

Aqua Splash

✕
background: linear-gradient(to right, #13547a, #80d0c7);

Blue Heaven

#6a11cb #2575fc
Copied!

Blue Heaven

✕
background: linear-gradient(to right, #6a11cb, #2575fc);

Blue Shadow

#1f4037 #99f2c8
Copied!

Blue Shadow

✕
background: linear-gradient(to right, #1f4037, #99f2c8);

Blue Shadow

#16BFFD #CB3066
Copied!

Blue Shadow

✕
background: linear-gradient(to right, #16BFFD, #CB3066);
Scroll to Top