Why does neumorphism use two shadows?

Soft UI fakes a single light source by pairing a light highlight shadow on the lit side with a dark shadow on the opposite side, both built from the element's own background color. The two box-shadows together make the surface look raised or sunken.

What does the inset (pressed) shape do?

Adding inset to both shadows moves them inside the element, so it looks pressed into the surface rather than raised above it. This tool applies inset automatically for the pressed and concave shapes.

Why should the element match the page background?

Neumorphism only reads as soft UI when the element and its surroundings share the same base color. If the backgrounds differ, the effect looks like an ordinary drop shadow instead of an extruded surface.

CSS Neumorphism Generator

NEW

Generate the soft-UI neumorphism look visually — pick a base color, light direction and shape, then copy the CSS.

Base background color

Element size

Border radius

Shadow distance

Blur

Intensity

Light source Shape

Preview

CSS

Send output to:

How to use Neumorphism Generator

Pick a base background color — soft UI works best with light or muted tones.
Set the element size, border-radius, shadow distance, blur and intensity.
Choose the light direction and a shape: flat, concave, convex or pressed inset.
Click Copy CSS to copy the full border-radius, background and box-shadow ruleset.

What is Neumorphism Generator?

Neumorphism, or soft UI, makes elements look extruded from or pressed into a single-color surface. The trick is two box-shadow values sharing the element's background color — a lighter highlight on the side facing the light and a darker shadow on the opposite side.

This generator derives the highlight and shadow automatically from your base color, then lets you set element size, border-radius, shadow distance, blur and intensity. Switch the light direction and choose a flat, concave, convex or pressed (inset) shape, and copy the full ruleset with border-radius, background and box-shadow.

FAQ

Why does neumorphism use two shadows?: Soft UI fakes a single light source by pairing a light highlight shadow on the lit side with a dark shadow on the opposite side, both built from the element's own background color. The two box-shadows together make the surface look raised or sunken.
What does the inset (pressed) shape do?: Adding inset to both shadows moves them inside the element, so it looks pressed into the surface rather than raised above it. This tool applies inset automatically for the pressed and concave shapes.
Why should the element match the page background?: Neumorphism only reads as soft UI when the element and its surroundings share the same base color. If the backgrounds differ, the effect looks like an ordinary drop shadow instead of an extruded surface.

Related tools

People also use

← Back to Developer Tools · All tags

Last updated: 2026-06-03

CSS Neumorphism Generator

How to use Neumorphism Generator

What is Neumorphism Generator?

FAQ

Related tools

People also use

Ad blocker detected

Keyboard shortcuts