Neon Bloom Gradient: CSS Code & Colors

Q: What's the CSS code for the Neon Bloom gradient?

Use background: radial-gradient(at 75% 75%, #FF00E5, transparent 70%), radial-gradient(at 15% 59%, #00F0FF, transparent 70%), radial-gradient(at 59% 15%, #F9F871, transparent 70%), #000000;. RGBA and HSLA versions are also available on this page.

Neon Bloom Gradient

Hot pink, cyan, and yellow mesh blobs popping against black.

Customize this gradient →

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

Color Stops

#FF00E5

#00F0FF

#F9F871

Background
#000000

Neon Bloom CSS Code

background: #000000;
background: radial-gradient(at 75% 75%, #FF00E5, transparent 70%), radial-gradient(at 15% 59%, #00F0FF, transparent 70%), radial-gradient(at 59% 15%, #F9F871, transparent 70%), #000000;

background: rgba(0, 0, 0, 1.0);
background: radial-gradient(at 75% 75%, rgba(255, 0, 229, 1.0), transparent 70%), radial-gradient(at 15% 59%, rgba(0, 240, 255, 1.0), transparent 70%), radial-gradient(at 59% 15%, rgba(249, 248, 113, 1.0), transparent 70%), rgba(0, 0, 0, 1.0);

background: hsla(0, 0%, 0%, 1.0);
background: radial-gradient(at 75% 75%, hsla(306, 100%, 50%, 1.0), transparent 70%), radial-gradient(at 15% 59%, hsla(184, 100%, 50%, 1.0), transparent 70%), radial-gradient(at 59% 15%, hsla(60, 92%, 71%, 1.0), transparent 70%), hsla(0, 0%, 0%, 1.0);

background: #000000;
background: radial-gradient(at 75% 75%, #FF00E5, transparent 70%), radial-gradient(at 15% 59%, #00F0FF, transparent 70%), radial-gradient(at 59% 15%, #F9F871, transparent 70%), #000000;
background: radial-gradient(at 75% 75% in oklch, oklch(68.71% 0.3068 334.19), transparent 70%), radial-gradient(at 15% 59% in oklch, oklch(87% 0.1481 202.88), transparent 70%), radial-gradient(at 59% 15% in oklch, oklch(95.42% 0.1562 108.64), transparent 70%), oklch(0% 0 none);

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

bg-[image:radial-gradient(at_75%_75%,#FF00E5,transparent_70%),radial-gradient(at_15%_59%,#00F0FF,transparent_70%),radial-gradient(at_59%_15%,#F9F871,transparent_70%)] bg-[#000000]

bg-[image:radial-gradient(at_75%_75%,#FF00E5,transparent_70%),radial-gradient(at_15%_59%,#00F0FF,transparent_70%),radial-gradient(at_59%_15%,#F9F871,transparent_70%)] bg-[#000000]

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Neon Bloom gradient?