Neon Pulse Gradient: CSS Code & Colors

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

Use background: conic-gradient(from 90deg, #FF00E5 0%, #00F0FF 33%, #F9F871 67%, #FF00E5 100%);. RGBA and HSLA versions are also available on this page.

Neon Pulse Gradient

Conic sweep of hot pink, cyan, and electric yellow.

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

#FF00E5

Neon Pulse CSS Code

background: #FF00E5;
background: conic-gradient(from 90deg, #FF00E5 0%, #00F0FF 33%, #F9F871 67%, #FF00E5 100%);

background: rgba(255, 0, 229, 1.0);
background: conic-gradient(from 90deg, rgba(255, 0, 229, 1.0) 0%, rgba(0, 240, 255, 1.0) 33%, rgba(249, 248, 113, 1.0) 67%, rgba(255, 0, 229, 1.0) 100%);

background: hsla(306, 100%, 50%, 1.0);
background: conic-gradient(from 90deg, hsla(306, 100%, 50%, 1.0) 0%, hsla(184, 100%, 50%, 1.0) 33%, hsla(60, 92%, 71%, 1.0) 67%, hsla(306, 100%, 50%, 1.0) 100%);

background: #FF00E5;
background: conic-gradient(from 90deg, #FF00E5 0%, #00F0FF 33%, #F9F871 67%, #FF00E5 100%);
background: conic-gradient(from 90deg in oklch, oklch(68.71% 0.3068 334.19) 0%, oklch(87% 0.1481 202.88) 33%, oklch(95.42% 0.1562 108.64) 67%, oklch(68.71% 0.3068 334.19) 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-[conic-gradient(from_90deg,#FF00E5_0%,#00F0FF_33%,#F9F871_67%,#FF00E5_100%)]

bg-[conic-gradient(from_90deg,#FF00E5_0%,#00F0FF_33%,#F9F871_67%,#FF00E5_100%)]

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Neon Pulse gradient?