Neon CSS Gradient Generator
A bright neon CSS gradient that punches from electric cyan through magenta into vivid pink. High-saturation and eye-catching, it suits dark UIs, hero banners and buttons. Copy it or tweak the stops below. 100% in your browser - copy the CSS or a Tailwind v4 export.
About the neon gradient
Neon gradients rely on fully saturated, high-energy colors that glow against a dark background. This preset runs electric cyan into magenta and hot pink so the blend stays loud from end to end. Interpolating in OKLCH is what keeps those bold hues vivid across the middle instead of dulling. Pair it with a dark surface, adjust the angle for the light streak you want, then copy the CSS or Tailwind v4 export.
The CSS for this gradient:
background: linear-gradient(in oklch 90deg, #22d3ee 0%, #d946ef 50%, #ec4899 100%);
Frequently Asked Questions
Use fully saturated, bright stops such as electric cyan (#22d3ee), magenta (#d946ef) and hot pink (#ec4899) in a linear-gradient, and place it over a dark background so the colors read as neon. Start from the preset above and copy the CSS.
Saturated neon colors appear to glow when they contrast against a dark surface, which mimics real neon light. On a white background the same gradient looks flat, so pair neon gradients with a dark UI.