Berry Fusion Gradient: CSS Code & Colors

Q: What's the CSS code for the Berry Fusion gradient?

Use background: radial-gradient(at center, #8E2DE2 0%, #4A00E0 30%, #DD2476 65%, #FF512F 100%);. RGBA and HSLA versions are also available on this page.

Berry Fusion Gradient

Radial violet-to-crimson-to-orange burst.

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

#DD2476

#FF512F

Berry Fusion CSS Code

background: #8E2DE2;
background: radial-gradient(at center, #8E2DE2 0%, #4A00E0 30%, #DD2476 65%, #FF512F 100%);

background: rgba(142, 45, 226, 1.0);
background: radial-gradient(at center, rgba(142, 45, 226, 1.0) 0%, rgba(74, 0, 224, 1.0) 30%, rgba(221, 36, 118, 1.0) 65%, rgba(255, 81, 47, 1.0) 100%);

background: hsla(272, 76%, 53%, 1.0);
background: radial-gradient(at center, hsla(272, 76%, 53%, 1.0) 0%, hsla(260, 100%, 44%, 1.0) 30%, hsla(333, 73%, 50%, 1.0) 65%, hsla(10, 100%, 59%, 1.0) 100%);

background: #8E2DE2;
background: radial-gradient(at center, #8E2DE2 0%, #4A00E0 30%, #DD2476 65%, #FF512F 100%);
background: radial-gradient(at center in oklch, oklch(54.01% 0.2493 302.67) 0%, oklch(44.37% 0.2683 280.08) 30%, oklch(59.31% 0.2213 1.13) 65%, oklch(67.37% 0.2157 33.01) 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-[radial-gradient(at_center,#8E2DE2_0%,#4A00E0_30%,#DD2476_65%,#FF512F_100%)]

bg-[radial-gradient(at_center,#8E2DE2_0%,#4A00E0_30%,#DD2476_65%,#FF512F_100%)]

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Berry Fusion gradient?