Neumorphism generator — soft UI shadows for raised and pressed shapes

How to use the neumorphism generator

1. Pick the Surface colour. It is used for both the element and the page behind it.
2. Set Size and Corner radius. A radius of half the size makes a circle.
3. Adjust Shadow distance, Blur and Intensity. Blur around twice the distance gives a soft look.
4. Choose a Shape: Flat (raised), Concave, Convex or Pressed (inset), and where the light comes from in Light from.
5. Copy the .neu rule.

What it does and when to use it

Neumorphism, or soft UI, makes interface elements look moulded from the same material as the page. A raised button casts a dark shadow away from the light and a light highlight towards it; a pressed button reverses this with inset shadows. It suits calm, decorative interfaces such as music players, smart-home dashboards and concept shots, and it works well for toggles that switch between raised and pressed.

For ordinary cards with realistic layered shadows, the box shadow generator gives more control. For a different see-through style, compare the glassmorphism generator, and to pick surface colours, start with the colour shades tool.

How it works

The tool reads your surface colour and makes two shades by multiplying the red, green and blue channels by (1 − intensity) for the dark shadow and (1 + intensity) for the light one. With light from the top left, the dark shadow is offset down and right by the distance and the light one up and left. Pressed adds inset to both. Concave and convex add a linear-gradient using gentler ±7% shades, angled from the light.

MDN lists box-shadow as Baseline widely available since July 2015.

Worked examples

Classic raised tile. The defaults (surface #e0e5ec, distance 18 px, blur 36 px, intensity 15%) give box-shadow: 18px 18px 36px #bec3c9, -18px -18px 36px #ffffff;

A convex round knob. Size 120 px, radius 60 px, distance 6 px, blur 12 px, Convex: background: linear-gradient(145deg, #f0f5fd, #d0d5db);

A pressed dark button. Surface #2d3748, distance 10, blur 20, intensity 20%, Pressed, light from the bottom right: box-shadow: inset -10px -10px 20px #242c3a, inset 10px 10px 20px #364256;

Limits and tips

• The tool reminds you about contrast on every result: soft shadows alone rarely reach 3:1 against the page.
• Shadows need room. Leave space around the element at least as large as the distance plus blur, or neighbours will cut the effect off.
• Colour transparency is ignored. The surface is treated as fully opaque.