Colors
Neumorphism Color Generator
Used by developers, writers, and creators worldwide.
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.
Read the complete guide — 4 min read
Loading usage…
Free forever — no account required
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.
You might also like
Popular tools from other categories that share themes with this one.