Design Soft-UI Surfaces With This Neumorphism Generator
The neumorphism generator turns a single base color into a complete soft-UI surface, automatically deriving the lighter highlight and darker shadow you need to make an element look extruded from — or pressed into — the page. Drag the sliders, pick a variant, and copy clean CSS that drops straight into your project.
Neumorphism, sometimes called soft UI, is a style that combines flat design with subtle depth. Elements share the background color of their parent and rely on paired box-shadows to suggest light and shadow on a soft plastic-like surface. Because the effect depends entirely on shadow math, eyeballing the values by hand is tedious — this tool does the math for you.
What you can build
- Flat — the classic raised neumorphic surface with one light and one dark outer shadow.
- Pressed — uses
insetshadows so the shape looks pushed into the background, perfect for active buttons and inputs. - Concave — adds a subtle gradient sloping inward for a scooped, dish-like surface.
- Convex — bulges outward with a soft highlight, ideal for tactile call-to-action buttons.
How the shadows are derived
From your base color the generator computes a lighter tint and a darker shade, then offsets them in opposite directions to mimic a single light source. The output is a standard CSS box-shadow declaration:
.neumorphic {
background: #e0e5ec;
border-radius: 16px;
box-shadow: 10px 10px 20px #a3b1c6,
-10px -10px 20px #ffffff;
}Pick a soft, mid-light base — pure white or pure black break the effect because there is no room for a lighter highlight or a darker shadow. If you need help choosing a working base, sample one with the color wheel or pull a corporate hue with Brand Colors from URL.
Keep it accessible
Soft UI is famously low contrast, which can make boundaries hard to see for users with visual impairments. Always verify your text and iconography against the surface with a contrast checker so the result still meets WCAG 2.2 requirements. The CSS box-shadow property is well supported across modern browsers, and you can stack multiple layers for richer depth using a dedicated CSS box shadow generator.
Tips for production-quality neumorphism
- Match the surface color to its parent exactly — even a 1% delta breaks the illusion.
- Keep your light source consistent across every component (typically top-left).
- Use larger blur radii for bigger cards and tighter shadows for small controls.
- Reserve pressed variants for toggled, active or focused states to reinforce affordance.