How does neumorphism create the soft, extruded look with only box-shadow?

It layers two shadows of the same background color: a darker one offset toward the bottom-right (simulating a shadow cast away from a light source above-left) and a lighter one offset toward the top-left (simulating a highlight catching that same light). Together they read as a soft 3D bump.

What's the difference between raised and pressed mode?

Raised mode uses regular (outer) box-shadows, making the panel look like it protrudes from the background. Pressed mode adds the inset keyword to both shadows, flipping the light/dark placement so the panel looks recessed — as if physically pushed in.

Why doesn't the effect show up on a white or black background?

The two shadows are the background color shifted lighter and darker by the intensity value. On pure white, the lighter shadow can't get any lighter (clamped at 255), and on pure black the darker one can't get any darker — so pick a mid-tone gray or pastel background instead.

Is neumorphism good for accessibility?

Not by default — the whole style relies on low contrast between elements and their background, which can fail WCAG contrast requirements for interactive elements. Add a visible focus state and consider a higher-contrast alternative for critical actions.

Does this tool send my design anywhere?

No — everything runs locally in your browser. The CSS is generated in real time and nothing is uploaded to a server.

CSS NEUMORPHISM GENERATOR

Dial in a soft-UI raised or pressed panel, then copy the generated CSS.

Panel

Mode

Distance: 8px

Blur: 16px

Intensity: 40

Border radius: 20px

Background color

Neumorphism needs a flat, mid-tone background — very light or very dark colors won't produce a visible effect.

CSS

.neumorphic {
  background: #e0e0e0;
  border-radius: 20px;
  box-shadow: 8px 8px 16px rgb(184, 184, 184), -8px -8px 16px rgb(255, 255, 255);
}

How to build a CSS neumorphic panel

1
Choose raised (extruded) or pressed (inset) mode.
2
Adjust shadow distance, blur, and intensity on the live preview panel.
3
Pick a flat, mid-tone background color — neumorphism needs one for the light/dark shadows to read.
4
Copy the generated .neumorphic CSS and paste it into your stylesheet.

Questions

How does neumorphism create the soft, extruded look with only box-shadow?: It layers two shadows of the same background color: a darker one offset toward the bottom-right (simulating a shadow cast away from a light source above-left) and a lighter one offset toward the top-left (simulating a highlight catching that same light). Together they read as a soft 3D bump.
What's the difference between raised and pressed mode?: Raised mode uses regular (outer) box-shadows, making the panel look like it protrudes from the background. Pressed mode adds the inset keyword to both shadows, flipping the light/dark placement so the panel looks recessed — as if physically pushed in.
Why doesn't the effect show up on a white or black background?: The two shadows are the background color shifted lighter and darker by the intensity value. On pure white, the lighter shadow can't get any lighter (clamped at 255), and on pure black the darker one can't get any darker — so pick a mid-tone gray or pastel background instead.
Is neumorphism good for accessibility?: Not by default — the whole style relies on low contrast between elements and their background, which can fail WCAG contrast requirements for interactive elements. Add a visible focus state and consider a higher-contrast alternative for critical actions.
Does this tool send my design anywhere?: No — everything runs locally in your browser. The CSS is generated in real time and nothing is uploaded to a server.