Grape Mist Gradient: CSS Code & Colors

Q: What's the CSS code for the Grape Mist gradient?

Use background: radial-gradient(at 56% 17%, #8E2DE2, transparent 70%), radial-gradient(at 44% 83%, #4A00E0, transparent 70%), #8E2DE2;. RGBA and HSLA versions are also available on this page.

Grape Mist Gradient

Purple and blue mesh blobs glowing from their own rich purple base.

Customize this gradient →

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

Color Stops

#8E2DE2

#4A00E0

Background
#8E2DE2

Grape Mist CSS Code

background: #8E2DE2;
background: radial-gradient(at 56% 17%, #8E2DE2, transparent 70%), radial-gradient(at 44% 83%, #4A00E0, transparent 70%), #8E2DE2;

background: rgba(142, 45, 226, 1.0);
background: radial-gradient(at 56% 17%, rgba(142, 45, 226, 1.0), transparent 70%), radial-gradient(at 44% 83%, rgba(74, 0, 224, 1.0), transparent 70%), rgba(142, 45, 226, 1.0);

background: hsla(272, 76%, 53%, 1.0);
background: radial-gradient(at 56% 17%, hsla(272, 76%, 53%, 1.0), transparent 70%), radial-gradient(at 44% 83%, hsla(260, 100%, 44%, 1.0), transparent 70%), hsla(272, 76%, 53%, 1.0);

background: #8E2DE2;
background: radial-gradient(at 56% 17%, #8E2DE2, transparent 70%), radial-gradient(at 44% 83%, #4A00E0, transparent 70%), #8E2DE2;
background: radial-gradient(at 56% 17% in oklch, oklch(54.01% 0.2493 302.67), transparent 70%), radial-gradient(at 44% 83% in oklch, oklch(44.37% 0.2683 280.08), transparent 70%), oklch(54.01% 0.2493 302.67);

The same gradient with its colors in OKLCH. Older browsers show the standard version. How OKLCH gradients work →

bg-[image:radial-gradient(at_56%_17%,#8E2DE2,transparent_70%),radial-gradient(at_44%_83%,#4A00E0,transparent_70%)] bg-[#8E2DE2]

bg-[image:radial-gradient(at_56%_17%,#8E2DE2,transparent_70%),radial-gradient(at_44%_83%,#4A00E0,transparent_70%)] bg-[#8E2DE2]

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Grape Mist gradient?