Northern Sky Gradient: CSS Code & Colors

Q: What's the CSS code for the Northern Sky gradient?

Use background: linear-gradient(0deg, #1E3C72 0%, #2A5298 50%, #7DB9E8 100%);. RGBA and HSLA versions are also available on this page.

Northern Sky Gradient

Three-stop navy-to-sky-blue gradient.

Customize this gradient →

Opens it in the generator: change the type or direction, adjust the colors, then copy the CSS or download.

Color Stops

#1E3C72

#2A5298

#7DB9E8

Northern Sky CSS Code

background: #1E3C72;
background: linear-gradient(0deg, #1E3C72 0%, #2A5298 50%, #7DB9E8 100%);

background: rgba(30, 60, 114, 1.0);
background: linear-gradient(0deg, rgba(30, 60, 114, 1.0) 0%, rgba(42, 82, 152, 1.0) 50%, rgba(125, 185, 232, 1.0) 100%);

background: hsla(219, 58%, 28%, 1.0);
background: linear-gradient(0deg, hsla(219, 58%, 28%, 1.0) 0%, hsla(218, 57%, 38%, 1.0) 50%, hsla(206, 70%, 70%, 1.0) 100%);

background: #1E3C72;
background: linear-gradient(0deg, #1E3C72 0%, #2A5298 50%, #7DB9E8 100%);
background: linear-gradient(0deg in oklch, oklch(36.43% 0.0998 261.1) 0%, oklch(44.81% 0.1232 260.71) 50%, oklch(76.25% 0.092 242.98) 100%);

The same colors blended in OKLCH, so this one looks more vivid than the gradient above. Older browsers show the standard gradient. How OKLCH gradients work →

bg-linear-0/srgb from-[#1E3C72] from-0% via-[#2A5298] via-50% to-[#7DB9E8] to-100%

bg-gradient-to-t from-[#1E3C72] from-0% via-[#2A5298] via-50% to-[#7DB9E8] to-100%

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Northern Sky gradient?