Light Blue

A refreshing combination of light blue shades that evoke the tranquility of aquamarine, the vibrancy of spray, and the serenity of Malibu.

๐ŸŽจ Add a touch of coastal charm to your designs with this invigorating gradient.

๐Ÿ’ก Aquamarine is believed to bring good luck and protection to sailors, while Malibu is named after a beautiful beach city in California.

CSS Linear Gradient Code

/* Light Blue CSS Linear Gradient Background */
.gradient {
  background: #9EFBD3;
  background: linear-gradient(
    to right,
    #9EFBD3,#57E9F2,#45D4FB
  );
}

TailwindCSS Logo TailwindCSS Linear Gradient

/* Light Blue TailwindCSS Linear Gradient */
<div class="bg-gradient-to-r from-[#9EFBD3] via-[#57E9F2] to-[#45D4FB]"></div>

Light Blue - UI Design Examples

You can use this gradient in your UI design in many ways, for example as a background in a tweet, for buttons or as a text gradient.

Tweet Background Generator

Ilias Ism
Ilias Ism
@illyism
I love this Light Blue color palette gradient background ๐Ÿ‘
May 18, 2024 at 10:43 AM

CSS Linear Gradient Button

Home
Why Light Blue?

Linear Gradient Border

Light Blue
Share

CSS Font Gradient

The Best Light Blue Tailwind CSS Landing Pages

Shade of Light Blue

We hope you enjoyed Light Blue. Keep reading for more amazing colorful content for developers, designers and creators!
View our entire collection of UI gradientsView all our color names