Electric Storm Gradient: CSS Code & Colors

Q: What's the CSS code for the Electric Storm gradient?

Use background: radial-gradient(at 50% 12%, #7B2FF7, transparent 70%), radial-gradient(at 88% 50%, #F72585, transparent 70%), radial-gradient(at 50% 88%, #00F5D4, transparent 70%), radial-gradient(at 12% 50%, #FFE500, transparent 70%), #050014;. RGBA and HSLA versions are also available on this page.

Electric Storm Gradient

Violet, magenta, and electric cyan mesh blobs crackling over near-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

#7B2FF7

#F72585

#00F5D4

#FFE500

Background
#050014

Electric Storm CSS Code

background: #050014;
background: radial-gradient(at 50% 12%, #7B2FF7, transparent 70%), radial-gradient(at 88% 50%, #F72585, transparent 70%), radial-gradient(at 50% 88%, #00F5D4, transparent 70%), radial-gradient(at 12% 50%, #FFE500, transparent 70%), #050014;

background: rgba(5, 0, 20, 1.0);
background: radial-gradient(at 50% 12%, rgba(123, 47, 247, 1.0), transparent 70%), radial-gradient(at 88% 50%, rgba(247, 37, 133, 1.0), transparent 70%), radial-gradient(at 50% 88%, rgba(0, 245, 212, 1.0), transparent 70%), radial-gradient(at 12% 50%, rgba(255, 229, 0, 1.0), transparent 70%), rgba(5, 0, 20, 1.0);

background: hsla(255, 100%, 4%, 1.0);
background: radial-gradient(at 50% 12%, hsla(263, 93%, 58%, 1.0), transparent 70%), radial-gradient(at 88% 50%, hsla(333, 93%, 56%, 1.0), transparent 70%), radial-gradient(at 50% 88%, hsla(172, 100%, 48%, 1.0), transparent 70%), radial-gradient(at 12% 50%, hsla(54, 100%, 50%, 1.0), transparent 70%), hsla(255, 100%, 4%, 1.0);

background: #050014;
background: radial-gradient(at 50% 12%, #7B2FF7, transparent 70%), radial-gradient(at 88% 50%, #F72585, transparent 70%), radial-gradient(at 50% 88%, #00F5D4, transparent 70%), radial-gradient(at 12% 50%, #FFE500, transparent 70%), #050014;
background: radial-gradient(at 50% 12% in oklch, oklch(53.9% 0.266 291.91), transparent 70%), radial-gradient(at 88% 50% in oklch, oklch(64.29% 0.2436 0.71), transparent 70%), radial-gradient(at 50% 88% in oklch, oklch(86.81% 0.1595 178.2), transparent 70%), radial-gradient(at 12% 50% in oklch, oklch(91.47% 0.1908 101.03), transparent 70%), oklch(10.15% 0.0561 294.03);

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

bg-[image:radial-gradient(at_50%_12%,#7B2FF7,transparent_70%),radial-gradient(at_88%_50%,#F72585,transparent_70%),radial-gradient(at_50%_88%,#00F5D4,transparent_70%),radial-gradient(at_12%_50%,#FFE500,transparent_70%)] bg-[#050014]

bg-[image:radial-gradient(at_50%_12%,#7B2FF7,transparent_70%),radial-gradient(at_88%_50%,#F72585,transparent_70%),radial-gradient(at_50%_88%,#00F5D4,transparent_70%),radial-gradient(at_12%_50%,#FFE500,transparent_70%)] bg-[#050014]

Similar Gradients

More Gradient Presets

FAQ

What is the Electric Storm gradient?