How the effect is built
Neumorphism (“new skeuomorphism,” also called soft UI) simulates a shape gently raised from or pressed into a surface using two box-shadows at once — a light highlight on the side facing the light source and a dark shadow on the opposite side:
box-shadow: 20px 20px 60px #bebebe, /* dark, lower-right */
-20px -20px 60px #ffffff; /* light, upper-left */Add the inset keyword to both and the element looks pressed in (concave) instead of raised (convex). This generator derives the two shadow colors from your base color automatically — typically nudging the base lightness up ~15% for the highlight and down ~15% for the shadow — so the pair stays harmonious for any background.
Convex vs concave
| Style | Shadows | Reads as |
|---|---|---|
| Raised (convex) | outer dual shadow | A button rising out of the surface |
| Pressed (inset) | inset dual shadow | A recessed well / active state |
A natural pattern is to use the raised style for a button at rest and switch to inset on press — but, per the accessibility note, don’t make that shadow change the only indication of state.
Where it works — and where it doesn’t
Neumorphism shines on decorative, low-stakes surfaces: a settings panel’s card, a music-player widget, a dribbble-style concept. It struggles for primary, must-be-usable controls because the soft edges undercut clarity. The honest framing: it’s a beautiful aesthetic with a built-in accessibility tax, so reserve it for places where the look matters more than maximal legibility, and reinforce any interactive element with the borders, contrast, and focus states described above.
Rendering tips
Keep the X/Y offsets as whole integers — fractional offsets (e.g. 5.5px) invite sub-pixel anti-aliasing that muddies the shadows, so the generator rounds them. And remember the same-color requirement: the element’s background-color must match its parent, or the illusion collapses. Dual large-blur shadows are also relatively expensive to paint, so animate transform/opacity rather than the box-shadow itself if a neumorphic element needs motion.