Why does the background colour matter?

Neumorphism relies on the element and its background being the same colour, so the soft shadows do all the shaping. Match them for the effect to work.

Inset draws the shadows inside the element, making it look pressed into the surface instead of raised out of it.

Is neumorphism accessible?

The low contrast can hurt readability, so use it carefully and keep text and controls clearly distinguishable.

CSS & Design

Neumorphism Generator

Create soft-UI neumorphic shadows and copy the CSS.

Free foreverRuns in your browserNo sign-up

Size200px

Radius24px

Distance12px

Blur24px

Background

Inset (pressed)

border-radius: 24px;
background: #E0E5EC;
box-shadow: 12px 12px 24px #b8bec7, -12px -12px 24px #ffffff;

About the Neumorphism Generator

Neumorphism, or soft UI, uses two opposite shadows - one light, one dark - so elements look softly extruded from the background.

This tool lets you set the size, radius, shadow distance and blur, toggle an inset (pressed) look, and copy the CSS.

It runs in your browser.

Key features

Light and dark paired shadows
Adjustable distance and blur
Inset (pressed) toggle
Copy CSS

How to use

1Adjust the size, distance and blur.
2Pick a background colour and toggle inset if needed.
3Copy the CSS.

Examples

Soft button

Output: box-shadow: 12px 12px 24px #b8bec7, -12px -12px 24px #ffffff;

Opposite light and dark shadows make the element look softly raised.

Frequently asked questions

Why does the background colour matter?: Neumorphism relies on the element and its background being the same colour, so the soft shadows do all the shaping. Match them for the effect to work.
What is inset mode?: Inset draws the shadows inside the element, making it look pressed into the surface instead of raised out of it.
Is neumorphism accessible?: The low contrast can hurt readability, so use it carefully and keep text and controls clearly distinguishable.