Neumorphism Generator
Design neumorphic soft UI surfaces with a live preview and copy the ready-made CSS box-shadow.
More options
How it works
Neumorphism (or "soft UI") makes an element look like it was pressed out of the page it sits
on. The trick is that the element and its background share the same colour, and two opposite
box-shadow layers do all the work: a darker shadow on the side away from the
light and a lighter highlight on the side facing it. This generator derives both shades from
your base colour — the dark one is the base multiplied by 1 − intensity, the
light one by 1 + intensity — so they always stay in the same colour family.
Move the light source and the two offsets swap corners together.
Flat keeps the surface a solid colour, concave and convex add a
subtle two-stop gradient so the face looks dented or domed, and pressed moves both
shadows inside with inset — the standard look for an active button. Distance
controls how far the shadows sit from the element, and blur (locked to three times the
distance by default) controls how soft they are. For the effect to read correctly, give the
parent the same background colour as the element. Everything is computed in your browser
with plain JavaScript: copy the CSS, grab just the box-shadow, or download a
.css file. Nothing is uploaded and there is no sign-up.
Frequently asked questions
What is neumorphism in CSS?
Neumorphism, or soft UI, is a style where an element looks extruded from the page behind it. The element and its parent share the same background colour, and two opposite box-shadow layers — a darker one on the side away from the light and a lighter highlight facing it — create the illusion of depth. Because there is no colour contrast between the surface and its background, the shadows alone carry the shape.
How do I create a neumorphic box-shadow?
Pick a mid-tone base colour, then derive two shades from it: multiply each RGB channel by 1 minus your intensity for the dark shadow and by 1 plus the intensity for the light one. Apply them as two shadows with mirrored offsets, for example box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff. A blur of roughly three times the offset distance looks most natural. This generator does the maths for you and shows the result instantly.
Is neumorphic design accessible?
Not on its own. Because neumorphic controls sit on a background of the same colour, their edges usually fall well below the WCAG 3:1 contrast minimum for interactive elements, and the effect is close to invisible in high-contrast mode. Use it for decorative surfaces and cards, keep text contrast high, and add a real border, focus ring or label so buttons and inputs are still identifiable without the shadow.