Neumorphism Generator

v1.0.2

Create soft-UI neumorphic shadow effects with live preview and copy-ready CSS.

Creates soft-UI neumorphic shadow effects with adjustable blur, distance, intensity, and colour, showing the two-shadow technique that produces the raised or pressed appearance.

How to use

→Set the background colour and adjust blur, distance, and intensity.
→Toggle between raised, pressed (inset), and flat variants.
→Copy the generated box-shadow: values and background-color.

Background color

Distance10

Blur radius21

Intensity20

Shape

Light shadow

Dark shadow

CSS

.element {
  background: #e0e5ec;
  box-shadow: 10px 10px 21px #adb2b9, -10px -10px 21px #ffffff;
  border-radius: 12px;
}