Cyber Bloom Gradient: CSS Code & Colors

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

Use background: radial-gradient(at 71% 79%, #FF00C1, transparent 70%), radial-gradient(at 28% 79%, #00FFF0, transparent 70%), radial-gradient(at 16% 38%, #9D00FF, transparent 70%), radial-gradient(at 51% 14%, #FFE500, transparent 70%), radial-gradient(at 84% 39%, #00FF85, transparent 70%), #FFE500;. RGBA and HSLA versions are also available on this page.

Cyber Bloom Gradient

Magenta, cyan, violet, and neon accents glowing from their own electric magenta 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

#FF00C1

#00FFF0

#9D00FF

#FFE500

#00FF85

Background
#FFE500

Cyber Bloom CSS Code

background: #FFE500;
background: radial-gradient(at 71% 79%, #FF00C1, transparent 70%), radial-gradient(at 28% 79%, #00FFF0, transparent 70%), radial-gradient(at 16% 38%, #9D00FF, transparent 70%), radial-gradient(at 51% 14%, #FFE500, transparent 70%), radial-gradient(at 84% 39%, #00FF85, transparent 70%), #FFE500;

background: rgba(255, 229, 0, 1.0);
background: radial-gradient(at 71% 79%, rgba(255, 0, 193, 1.0), transparent 70%), radial-gradient(at 28% 79%, rgba(0, 255, 240, 1.0), transparent 70%), radial-gradient(at 16% 38%, rgba(157, 0, 255, 1.0), transparent 70%), radial-gradient(at 51% 14%, rgba(255, 229, 0, 1.0), transparent 70%), radial-gradient(at 84% 39%, rgba(0, 255, 133, 1.0), transparent 70%), rgba(255, 229, 0, 1.0);

background: hsla(54, 100%, 50%, 1.0);
background: radial-gradient(at 71% 79%, hsla(315, 100%, 50%, 1.0), transparent 70%), radial-gradient(at 28% 79%, hsla(176, 100%, 50%, 1.0), transparent 70%), radial-gradient(at 16% 38%, hsla(277, 100%, 50%, 1.0), transparent 70%), radial-gradient(at 51% 14%, hsla(54, 100%, 50%, 1.0), transparent 70%), radial-gradient(at 84% 39%, hsla(151, 100%, 50%, 1.0), transparent 70%), hsla(54, 100%, 50%, 1.0);

background: #FFE500;
background: radial-gradient(at 71% 79%, #FF00C1, transparent 70%), radial-gradient(at 28% 79%, #00FFF0, transparent 70%), radial-gradient(at 16% 38%, #9D00FF, transparent 70%), radial-gradient(at 51% 14%, #FFE500, transparent 70%), radial-gradient(at 84% 39%, #00FF85, transparent 70%), #FFE500;
background: radial-gradient(at 71% 79% in oklch, oklch(66.94% 0.2867 343.27), transparent 70%), radial-gradient(at 28% 79% in oklch, oklch(90.05% 0.1571 187.23), transparent 70%), radial-gradient(at 16% 38% in oklch, oklch(56.47% 0.2963 303.14), transparent 70%), radial-gradient(at 51% 14% in oklch, oklch(91.47% 0.1908 101.03), transparent 70%), radial-gradient(at 84% 39% in oklch, oklch(87.58% 0.2303 152.02), transparent 70%), oklch(91.47% 0.1908 101.03);

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

bg-[image:radial-gradient(at_71%_79%,#FF00C1,transparent_70%),radial-gradient(at_28%_79%,#00FFF0,transparent_70%),radial-gradient(at_16%_38%,#9D00FF,transparent_70%),radial-gradient(at_51%_14%,#FFE500,transparent_70%),radial-gradient(at_84%_39%,#00FF85,transparent_70%)] bg-[#FFE500]

bg-[image:radial-gradient(at_71%_79%,#FF00C1,transparent_70%),radial-gradient(at_28%_79%,#00FFF0,transparent_70%),radial-gradient(at_16%_38%,#9D00FF,transparent_70%),radial-gradient(at_51%_14%,#FFE500,transparent_70%),radial-gradient(at_84%_39%,#00FF85,transparent_70%)] bg-[#FFE500]

Similar Gradients

More Gradient Presets

FAQ

What is the Cyber Bloom gradient?