Synthwave Sunset Gradient: CSS Code & Colors

Q: What's the CSS code for the Synthwave Sunset gradient?

Use background: linear-gradient(45deg, #2E0854 0%, #7303C0 35%, #EC38BC 70%, #FDEFF9 100%);. RGBA and HSLA versions are also available on this page.

Synthwave Sunset Gradient

Retro four-stop purple-to-pink dusk.

Customize this gradient →

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

Color Stops

#2E0854

#7303C0

#EC38BC

#FDEFF9

Synthwave Sunset CSS Code

background: #2E0854;
background: linear-gradient(45deg, #2E0854 0%, #7303C0 35%, #EC38BC 70%, #FDEFF9 100%);

background: rgba(46, 8, 84, 1.0);
background: linear-gradient(45deg, rgba(46, 8, 84, 1.0) 0%, rgba(115, 3, 192, 1.0) 35%, rgba(236, 56, 188, 1.0) 70%, rgba(253, 239, 249, 1.0) 100%);

background: hsla(270, 83%, 18%, 1.0);
background: linear-gradient(45deg, hsla(270, 83%, 18%, 1.0) 0%, hsla(276, 97%, 38%, 1.0) 35%, hsla(316, 83%, 57%, 1.0) 70%, hsla(317, 78%, 96%, 1.0) 100%);

background: #2E0854;
background: linear-gradient(45deg, #2E0854 0%, #7303C0 35%, #EC38BC 70%, #FDEFF9 100%);
background: linear-gradient(45deg in oklch, oklch(25.66% 0.1232 299.79) 0%, oklch(45.45% 0.238 302.27) 35%, oklch(65.68% 0.2468 341.31) 70%, oklch(96.6% 0.0199 335.66) 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-[45deg,#2E0854_0%,#7303C0_35%,#EC38BC_70%,#FDEFF9_100%]

bg-[linear-gradient(45deg,#2E0854_0%,#7303C0_35%,#EC38BC_70%,#FDEFF9_100%)]

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Synthwave Sunset gradient?