Cosmic Dust Gradient: CSS Code & Colors

Q: What's the CSS code for the Cosmic Dust gradient?

Use background: linear-gradient(180deg, #0F0C29 0%, #302B63 20%, #24243E 45%, #7303C0 70%, #EC38BC 100%);. RGBA and HSLA versions are also available on this page.

Cosmic Dust Gradient

Five-stop deep-space violet sweep.

Customize this gradient →

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

Color Stops

#0F0C29

#302B63

#24243E

#7303C0

#EC38BC

Cosmic Dust CSS Code

background: #0F0C29;
background: linear-gradient(180deg, #0F0C29 0%, #302B63 20%, #24243E 45%, #7303C0 70%, #EC38BC 100%);

background: rgba(15, 12, 41, 1.0);
background: linear-gradient(180deg, rgba(15, 12, 41, 1.0) 0%, rgba(48, 43, 99, 1.0) 20%, rgba(36, 36, 62, 1.0) 45%, rgba(115, 3, 192, 1.0) 70%, rgba(236, 56, 188, 1.0) 100%);

background: hsla(246, 55%, 10%, 1.0);
background: linear-gradient(180deg, hsla(246, 55%, 10%, 1.0) 0%, hsla(245, 39%, 28%, 1.0) 20%, hsla(240, 27%, 19%, 1.0) 45%, hsla(276, 97%, 38%, 1.0) 70%, hsla(316, 83%, 57%, 1.0) 100%);

background: #0F0C29;
background: linear-gradient(180deg, #0F0C29 0%, #302B63 20%, #24243E 45%, #7303C0 70%, #EC38BC 100%);
background: linear-gradient(180deg in oklch, oklch(17.85% 0.0571 283.68) 0%, oklch(32.7% 0.0956 283.81) 20%, oklch(27.37% 0.0477 282.79) 45%, oklch(45.45% 0.238 302.27) 70%, oklch(65.68% 0.2468 341.31) 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-[180deg,#0F0C29_0%,#302B63_20%,#24243E_45%,#7303C0_70%,#EC38BC_100%]

bg-[linear-gradient(180deg,#0F0C29_0%,#302B63_20%,#24243E_45%,#7303C0_70%,#EC38BC_100%)]

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Cosmic Dust gradient?