Cyberpunk Neon Gradient: CSS Code & Colors

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

Use background: linear-gradient(315deg, #FC00FF 0%, #00DBDE 100%);. RGBA and HSLA versions are also available on this page.

Cyberpunk Neon Gradient

Magenta and cyan collide for a high-voltage look.

Customize this gradient →

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

Color Stops

#FC00FF

#00DBDE

Cyberpunk Neon CSS Code

background: #FC00FF;
background: linear-gradient(315deg, #FC00FF 0%, #00DBDE 100%);

background: rgba(252, 0, 255, 1.0);
background: linear-gradient(315deg, rgba(252, 0, 255, 1.0) 0%, rgba(0, 219, 222, 1.0) 100%);

background: hsla(299, 100%, 50%, 1.0);
background: linear-gradient(315deg, hsla(299, 100%, 50%, 1.0) 0%, hsla(181, 100%, 44%, 1.0) 100%);

background: #FC00FF;
background: linear-gradient(315deg, #FC00FF 0%, #00DBDE 100%);
background: linear-gradient(315deg in oklch, oklch(69.72% 0.3215 327.72) 0%, oklch(80.81% 0.1376 196.54) 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-linear-315/srgb from-[#FC00FF] from-0% to-[#00DBDE] to-100%

bg-[linear-gradient(315deg,#FC00FF_0%,#00DBDE_100%)]

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Cyberpunk Neon gradient?