Neumorphism Generator

Design soft-UI neumorphic surfaces with dual shadows — copy the CSS.

About the Neumorphism Generator

Design soft-UI neumorphic surfaces with dual shadows — copy the CSS. Every value is computed locally with vanilla JavaScript — there is no server round-trip, no sign-up and no limit on how many times you use it.

How to use

Step 1

Pick a base color

Choose the surface color the element sits on.

Step 2

Set distance

Adjust the shadow offset to control depth.

Step 3

Set blur

Soften or sharpen the dual shadows.

Step 4

Copy the CSS

Paste the soft-UI styles onto your element.

Benefits

Soft, tactile UI

Create the extruded soft-shadow look in seconds.

Balanced shadows

Light and dark shadows are derived from your base color automatically.

Copy-ready output

Get clean box-shadow CSS without manual tweaking.

Features & supported formats

Features

Base color input
Adjustable distance
Adjustable blur
Dual-shadow output
Live preview

Supported formats

CSS

Accuracy & limitations

Soft-UI shadows are derived from your base color and only work when the element and its background match. The style is also inherently low-contrast, which has real accessibility cost.

The shadow colors are derived by lightening and darkening your base color, so the effect only works when the element and its surrounding background are the same color.
Neumorphism is inherently low-contrast, which makes it difficult to meet WCAG requirements for interactive elements. Add borders, text contrast or focus styling if the element is a control.
The effect depends on subtle shadows and can be nearly invisible on low-quality displays or in bright ambient light.
Deep or heavily blurred shadows on many elements can affect scrolling performance.

Frequently asked questions

Why does neumorphism use two shadows?

It places a light shadow and a dark shadow on opposite sides to fake a soft, extruded surface.

What background should I use?

Neumorphism relies on the element and its background sharing the same color, so set them to match.

Is neumorphism accessible?

Low contrast is a common downside; pair it with clear borders or text contrast for usability.

How are the shadow colors chosen?

They are calculated by lightening and darkening your base color so they always coordinate.

Can I make it look inset?

Yes. Swap the offsets or add the inset keyword in the copied CSS for a pressed-in effect.