Why this matters
Neumorphism — also called soft UI — creates the illusion that elements are extruded from or pressed into a single-color surface, using only paired box-shadow values. The effect depends on computing a lightened and a darkened shade from the background color, then placing each shadow at opposite corners to simulate directional lighting. This technique produces interfaces that feel tactile and physical, with a distinctive aesthetic that became popular in dashboard designs, health apps, and minimalist control panels.
The challenge of neumorphism is getting the shadow math right. Too little intensity and the element looks flat; too much and the shadows look harsh and cartoonish. The background color itself is critical — the effect requires mid-tone surfaces where both lightening and darkening have room to operate. On pure black or pure white, one of the two shadows effectively disappears, destroying the illusion. This generator handles all the interpolation math automatically and gives you sliders for distance, blur, radius, and intensity so you can dial in the exact look you want without manual color calculations.
Shadow type reference
| Shape | inset Keyword | Shadow Direction | Visual Effect |
|---|---|---|---|
| Flat | No | Top-left light, bottom-right dark | Raised, extruded surface |
| Pressed | Yes | Top-left light, bottom-right dark | Pushed-in button |
| Inset | Yes | Same as Pressed (alias) | Concave depression |
Shadow computation: each RGB channel is interpolated toward white (light shadow) or black (dark shadow) by the intensity percentage.
Best background range: mid-tone colors between approximately #c8cdd5 and #e8ecf0, where both light and dark shadows have room to differentiate.
How to use it
Pick a background color — for the strongest neumorphic effect, choose a mid-tone shade like #e0e5ec.
Set the element size and border radius using the sliders.
Adjust distance (shadow offset) and blur (shadow spread) until the shadows look natural for your element's size.
Tune the intensity slider to control how pronounced the light-dark contrast appears.
Switch the shape between Flat, Pressed, and Inset to see how the same parameters look with different depth effects.
Copy the generated CSS directly into your stylesheet — no vendor prefixes needed.
Testing your result
Apply the generated CSS to a test element on a page with the same background color you selected. The element should appear to float above or press into the surface. Check both light and dark mode contexts — neumorphism designed on a light mid-tone will look completely wrong on a dark theme. Verify that the border-radius matches your design system's rounding token. Test interactive states by adding `:hover` and `:active` pseudo-classes that switch between Flat and Pressed shadows, which is the standard neumorphic button interaction pattern.
Common mistakes
Using pure black or pure white as the background, which eliminates the light-dark contrast needed for the effect.
Setting intensity too high, creating shadows that look more like drop-shadow glitches than soft extrusions.
Using neumorphic styles for primary action buttons without adding sufficient focus-visible outlines, which creates accessibility problems for keyboard navigation.
Copying the CSS without matching the background color on the parent element — the shadows are computed relative to the selected background and will look wrong on a different one.
Edge cases and options
The generator uses the `box-shadow` property exclusively, which has been unprefixed in all modern browsers for years — no `-webkit` prefix is needed. The dual-shadow math interpolates each RGB channel individually toward white or black by the intensity percentage, which produces physically plausible light and dark tones for any background color. For very saturated background colors, the light shadow may appear slightly washed out because the interpolation pushes toward white rather than toward a tinted highlight. The tool does not generate `background-clip` or `filter` properties — the entire effect is achieved with box-shadow and border-radius alone, keeping the CSS minimal and performant.
Real-world use cases
Building a settings panel where toggle switches and sliders need to feel tactile and interactive.
Designing a fitness tracker dashboard where raised cards for steps, heart rate, and calories create a physical, instrument-panel aesthetic.
Creating on-off toggle components that visually press in when activated using the Pressed shadow type.
Prototyping a calculator app where each button appears to extrude from the surface and press inward on click.
Frequently asked questions
Q: How does the dual-shadow math work?
A: From your background color we compute a lightened and darkened shade by interpolating each RGB channel toward white (light) or black (dark) by the intensity percentage. The two shadows are placed at opposite corners to simulate a top-left light source.
Q: What is the difference between Pressed and Inset?
A: Both add the `inset` keyword so the shadow renders inside the element. They are aliases that emphasise the concave look — the shadow direction remains the same as the raised version.
Q: Why does my element look flat on dark backgrounds?
A: Neumorphism relies on subtle light/dark contrast, which works best on mid-tone backgrounds (like #e0e5ec). On pure black or white there is no room to lighten or darken, so the effect disappears.
Q: Is neumorphism accessible?
A: Use it for decorative surfaces, not for primary controls — the low contrast can fail WCAG. Always pair neumorphic UI with clear focus states and adequate text contrast.
Q: Can I use these shadows with CSS variables for theming?
A: Yes. Replace the hardcoded shadow colors with `var(--neu-light)` and `var(--neu-dark)` variables, then swap them when the background color changes.
Start using it now
Try the Neumorphism Generator tool. See also Box Shadow Generator and Glassmorphism Generator for other modern CSS effects.
