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.
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);