Neumorphism Generator
Build soft UI (neumorphism) CSS. Choose base color and 4 shape variants: flat, pressed (inset), concave, or convex. The dark and light shadow colors are computed automatically from the base color for realistic soft depth.
.neu {
background: #e0e5ec;
border-radius: 24px;
box-shadow: 8px 8px 20px #bec3c9, -8px -8px 20px #ffffff;
}About Neumorphism Generator
Neumorphism (or 'soft UI') is the design trend where UI elements look extruded from or pressed into the background surface, using two symmetric shadows (one dark, one light) to create the illusion of soft depth. It's polarizing — designers love the softness but accessibility advocates rightly flag its low contrast. Used carefully (for decorative surfaces, not primary content), it can add tactile character to a design system.
This generator builds neumorphic CSS visually with four shape variants: flat (extruded outward with symmetric shadows), pressed (inset — pushed into the surface), concave (inward gradient), and convex (outward gradient). The tool computes darker/lighter shade colors from your base automatically for realistic shadow blending. Best used when the element sits on the same color background as its container — the shadows blend into the surrounding surface, which is what sells the illusion.
How to Use
Pick the base surface color — light backgrounds work best (#e0e5ec is the classic neumorphism color).
Choose a shape: flat (default extruded), pressed (inset — pushed into the surface), concave (inward gradient), or convex (outward gradient).
Adjust distance and blur for shadow intensity. Larger values = softer, larger shadows.
The tool computes darker and lighter variants of your base color for the shadow layers. Same base color for background AND parent element = the true neumorphic look.
Frequently Asked Questions
Why does neumorphism only work on colored backgrounds?
Neumorphism's illusion of depth relies on the element being the SAME color as its background — the shadows on either side sell the illusion. On a white page against a white element, there's nothing to blend into. Set both the parent and element to the same base color.
Is neumorphism accessible?
Not by default — the low contrast that gives it the soft look also fails WCAG contrast requirements for text and interactive elements. Add darker text and clear focus states. Use neumorphism for decorative surfaces, not the primary content area.
What's the difference between concave and convex?
Convex = light gradient on top (looks pushed OUT toward viewer). Concave = dark gradient on top (looks pushed IN, cupped). Convex is the default 'button' look; concave is used for pressed/well states.
Does neumorphism work in dark mode?
Yes — just use a dark base color (#1a1a1a or similar) and the shadow shades adjust automatically. The illusion is slightly weaker in dark mode because dark surfaces have less shadow range to work with.