Neon Gradients

Electric, high-chroma gradients — synthwave, vaporwave and retro-futurist palettes built to glow against a dark ground.

16 gradientsCSS · Tailwind · Figma
All WarmCoolBoldPastelDarkNeonNeutral
All types BrandCuratedSeasonalUI
All colours RedOrangeYellowGreenTealBluePurplePinkGrey

Neon Gradients · Blue

16 gradients

About neon gradients

Neon is the smallest mood here and deliberately so. These colors only work in a specific context: a dark surface, a limited amount of surface area, and usually a glow or blur to sell the effect. Used as a full-page background they become exhausting within seconds.

Where they earn their keep is accents — a border, a button, a chart line, a heading — and in music, gaming and nightlife products where the reference is the point. Pair them with the dark mood rather than with each other.

Explore more gradients

By type

BrandCuratedSeasonalUIBrands A–ZGrainyNewGradient of the daySurprise me

By mood

WarmCoolBoldPastelDarkNeonNeutral

By industry

TechMediaFinanceFashionFood

By colour

RedOrangeYellowGreenTealBluePurplePinkColour pairsAny hex code

Build your own

Gradient GeneratorAnimated Gradient GeneratorMesh Gradient GeneratorTonal Gradient GeneratorGlassmorphism BuilderGradient Text GeneratorGradient from ImageGradient Wallpaper MakerGradient Border GeneratorGradient Contrast CheckerSVG Wave & Blob GeneratorDuotone GeneratorAurora Background GeneratorGradient Button GeneratorGradient Palette GeneratorGradient Shadow GeneratorCSS Pattern GeneratorGradient Avatar GeneratorGradient Loader GeneratorGradient Overlay Generator