Colors
Neumorphism Color Generator
A neumorphism color generator produces the trio of tones the soft-UI style depends on: the base surface plus a lighter highlight and a darker shadow derived from it, with a complete box-shadow declaration to create the signature extruded look. Neumorphism makes elements appear pressed into or raised out of the background using two offset shadows, a light one toward the light source and a dark one away from it, both very close to the surface color. Because the effect only works when surface, element, and shadows share nearly the same tone, picking the shadow colors by hand is fiddly; this derives them automatically from your base. Designers and developers use it to style buttons, toggles, cards, and inputs in the soft style. Each value is paste-ready, and the bundled CSS drops onto an element to give it depth. Low contrast makes neumorphism hard for accessibility, so use it sparingly.
How to use
- Choose your options above
- Click Generate
- Copy your result
Detailed instructions
- Paste your base surface color.
- Click Generate to derive the shadow tones.
- Paste the box-shadow CSS onto your element.
- Match the element background to the base color.
Use Cases
- •Styling a soft-UI raised button or card
- •Creating pressed-in input and toggle styling
- •Deriving matching light and dark shadow tones
- •Prototyping a neumorphic interface quickly
- •Generating ready-to-paste box-shadow CSS
Tips
- →Keep the element and background the same base color.
- →Use a light grey-blue base for the classic soft look.
- →Invert the shadow offsets for a pressed-in state.
- →Use neumorphism sparingly due to low contrast.
FAQ
how is the neumorphic effect created
Two box-shadows on the same element, a light one offset toward the light source and a dark one offset away, both close to the surface color, make the element look extruded from or pressed into the background.
why must the colors be so close
Neumorphism reads as a single molded surface, so the element, background, and shadows must share almost the same tone. Large color differences break the illusion and turn it into an ordinary drop shadow.
is neumorphism accessible
Not very. Its low contrast makes edges and states hard to perceive, which fails accessibility for many users. Use it sparingly for decorative emphasis and keep critical controls clearly outlined and labeled.
What background works best for neumorphism?
A soft, mid-light neutral — not pure white or black — because the effect relies on a light shadow and a dark shadow both being visible against the surface, which only works when the base sits between them. Light greys and muted off-whites are ideal. The generator produces the base colour together with its lighter and darker shadow colours, so the trio is already tuned to make the raised or inset illusion read cleanly.
Is neumorphism still in style?
It surged around 2020 and remains visually distinctive, but its low contrast makes it hard to use accessibly, so most designers now apply it sparingly — for a few decorative controls rather than whole interfaces. Used selectively, it still looks fresh. The generator gives you the colours to achieve the effect where it fits; pair it with clear, higher-contrast text and controls so the interface stays usable.
You might also like
Popular tools from other categories that share themes with this one.
Try these next
More free tools from other corners of the catalog, picked by shared themes.