Generate Soft-UI CSS shadows in seconds — preview, tweak, copy.
Neumorphism / Soft-UI Generator
Light Shadow
Dark Shadow
/* element styles */ border-radius: 20px; background: #e0e5ec; box-shadow: 10px 10px 20px rgb(173,178,185), -10px -10px 20px rgb(255,255,255);
box-shadow
10px 10px 20px rgb(173,178,185), -10px -10px 20px rgb(255,255,255)
background
#e0e5ec
Neumorphism — also called Soft UI — creates realistic raised or pressed elements using dual box-shadows derived from the background color. This free neumorphism generator lets you pick a base color and dial in distance, blur, and intensity to produce pixel-perfect CSS instantly. Choose from flat, concave, convex, or pressed shapes, preview the result live, then copy the CSS with one click.
Neumorphism (or Soft UI) is a design style that uses two contrasting box-shadows — one lighter and one darker than the background color — to make elements appear to protrude from or sink into the surface. It relies on a single flat background color for both the element and its container.
The generator takes your chosen base color and shifts it lighter for the top-left highlight shadow and darker for the bottom-right shadow. The intensity slider controls how much lighter or darker those derived colors become.
Flat gives the classic raised look. Convex adds a subtle lighter-to-darker gradient simulating a curved surface. Concave reverses that gradient. Pressed uses inset box-shadows so the element appears pushed into the background.
Yes — paste the box-shadow value into a Tailwind arbitrary property like shadow-[...] or add it to your tailwind.config.js theme.boxShadow extension. The border-radius and background values map to standard Tailwind utilities as well.