Neumorphism CSS Generator

Design soft-UI shadows and copy the CSS, with a live preview.

Base Color: #E0E0E0Distance: 20pxBlur: 60pxRadius: 50pxCSS Length: 115 chars

Presets

Base color

Distance (20px)

Blur (60px)

Radius (50px)

CSS Code

border-radius: 50px;
background: #e0e0e0;
box-shadow: 20px 20px 60px #bebebe,
            -20px -20px 60px #e5e5e5;

What is neumorphism?

Neumorphism("soft UI") fakes extruded shapes by pairing a dark shadow on one side with a light shadow on the other, both derived from a single background color — so the element looks pressed into or raised out of the surface. It only reads correctly when the element and its parent share that background, which the preview above does. The CSS is generated live in your browser.

More CSS generators: the glassmorphism generator, the box-shadow generator, and the gradient generator.

Built and maintained by Meet Shah · Last updated 18 July 2026

What this tool is used for

Producing the paired light and dark shadows a soft-UI look depends on.
Getting an inset variant for a pressed state.
Tuning shadow distance and blur against a live preview.
Producing CSS to match a design handed over as an image.
Comparing an extruded and an inset treatment side by side.

Frequently Asked Questions

What makes the neumorphic effect?: Two box-shadows of the same offset in opposite directions — one darker below-right, one lighter above-left — on a background the SAME colour as the surface behind it. The element appears extruded from the page rather than sitting on it.
Why must the element match its background?: Because the illusion is that the surface is one continuous material being pushed or pressed. Any colour difference reads as a separate object with shadows attached, which is an ordinary card. The matching colour is the whole trick, not a stylistic preference.
How is the inset variant different?: The `inset` keyword moves both shadows inside the element, so it reads as pressed in rather than raised out. Toggling inset on interaction is what makes a neumorphic button feel like it depresses — it is the same two shadows, inverted.
Why is neumorphism criticised for accessibility?: Because it relies on very low contrast by construction. The shadows that make it work are subtle by definition, so the boundary between a control and the page frequently falls below WCAG's 3:1 requirement for a UI component — and it is unusable at low vision or on a dim screen.
Can it be made accessible?: Partly, by adding a real border or a text label with sufficient contrast and not relying on the shadow to communicate that something is interactive. At that point the shadow is decoration rather than affordance, which is the only version of the style that passes an audit.

Common errors and gotchas

Producing a control with almost no contrast against its background, which is the style's central accessibility problem.
Relying on shadow alone to signal that something is interactive.
Using it for form inputs, where a visible boundary matters more than the aesthetic.
Assuming it works on any background, when the effect needs a mid-tone to read at all.
Ignoring focus states, which soft shadows tend to hide entirely.