Neutral Gradients
Greys and near-greys with just enough hue to belong to a palette — the quiet surfaces most of an interface is actually made of.
85 gradientsCSS · Tailwind · Figma
About neutral gradients
Most of a product is not the accent colour. It is cards, panels, dividers, table rows, disabled states and loading skeletons, and all of those read better with a slight gradient than with a flat fill — the shift gives a surface an implied light source without drawing attention to itself.
The trick is that these are almost never pure grey. A neutral carrying a few points of your brand hue looks like part of the system, while true #808080 looks like unstyled default chrome. Build one from your own brand colour with the Tonal Gradient Generator and the whole interface quietly agrees with itself.
Explore more gradients
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