About the Neumorphism (Soft UI) Generator
Neumorphism, sometimes called soft UI, creates the illusion that an element is either extruded from or pressed into its background using two offsetting shadows — one light, one dark — rather than a single drop shadow. Getting the light and dark shadow angles, blur, and colors to feel physically consistent is genuinely hard to eyeball, so this generator lets you tune the effect visually on a live preview and copy the resulting layered box-shadow CSS.
How it works
A convincing neumorphic shadow uses two box-shadow layers simultaneously: a dark shadow offset toward the bottom-right (as if lit from the top-left) and a light shadow offset toward the top-left, both using colors derived from the element's own background rather than pure black or white, which is what makes the effect feel soft and monochromatic instead of like a regular drop shadow. Toggling between 'raised' and 'pressed' states simply swaps which shadow is treated as inset, simulating whether the shape appears to protrude from or sink into the surface.
Common use cases
- Designing soft, extruded buttons and toggle switches for a minimalist, monochromatic UI
- Creating a pressed-in visual state for an active or selected form control
- Building a soft UI card component that feels molded from the same material as its background
- Prototyping the neumorphism trend quickly to evaluate whether it fits a particular product's visual style
- Getting matched light/dark shadow colors calculated automatically from a single base background color
Tips for best results
Neumorphism depends entirely on a low-contrast, mid-tone background color — the effect essentially disappears on pure white, pure black, or highly saturated backgrounds, since the light and dark shadows need visible room to lighten and darken from that base tone. Because the whole style relies on subtle shadow contrast rather than color or borders to distinguish elements, it's notoriously difficult to make fully accessible; always pair neumorphic buttons with a clear focus state and don't rely on the shadow effect alone to indicate interactivity.
Frequently asked questions
A single shadow only communicates 'this object is above the surface, casting a shadow below it.' Two shadows — a light one from the implied light source's direction and a dark one from the opposite direction — are what create the illusion of a soft, extruded or embossed surface rather than a flat card with a normal drop shadow.
A raised element uses two regular (non-inset) shadows to look like it protrudes from the background. A pressed element uses inset shadows instead, flipping the light and dark positions to look like it's been pushed into the surface, which is commonly used for an active button state.
The style intentionally minimizes contrast and avoids borders to achieve its soft, monochromatic look, which directly conflicts with accessibility guidance that recommends clear visual boundaries and sufficient contrast for interactive elements — it's a style that requires extra care to implement responsibly.
Yes, but the light and dark shadow colors need to be recalculated relative to a dark background rather than reused from a light-mode version — lightening and darkening a dark base color produces a different, appropriately dim set of shadow colors, which this generator calculates automatically from whatever background color you provide.
The effect is designed around a single flat background color, since the shadow colors are derived directly from it — applying it over a gradient background will still render but may look inconsistent, since the light and dark shadow colors won't match every point of a shifting gradient equally well.