Purple Haze Gradient: CSS Code & Colors

Q: What's the CSS code for the Purple Haze gradient?

Use background: linear-gradient(315deg, #654EA3 0%, #EAAFC8 100%);. RGBA and HSLA versions are also available on this page.

Purple Haze Gradient

Deep violet fading into dusty pink.

Customize this gradient →

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

Color Stops

#654EA3

#EAAFC8

Purple Haze CSS Code

background: #654EA3;
background: linear-gradient(315deg, #654EA3 0%, #EAAFC8 100%);

background: rgba(101, 78, 163, 1.0);
background: linear-gradient(315deg, rgba(101, 78, 163, 1.0) 0%, rgba(234, 175, 200, 1.0) 100%);

background: hsla(256, 35%, 47%, 1.0);
background: linear-gradient(315deg, hsla(256, 35%, 47%, 1.0) 0%, hsla(335, 58%, 80%, 1.0) 100%);

background: #654EA3;
background: linear-gradient(315deg, #654EA3 0%, #EAAFC8 100%);
background: linear-gradient(315deg in oklch, oklch(48.93% 0.1321 293.38) 0%, oklch(81.56% 0.0757 351.72) 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-315/srgb from-[#654EA3] from-0% to-[#EAAFC8] to-100%

bg-[linear-gradient(315deg,#654EA3_0%,#EAAFC8_100%)]

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Purple Haze gradient?