A soft neumorphic-style shadow, ready to copy as CSS.
This tool builds a box-shadow value visually — x/y offset, blur radius, spread, color, and inset — with a live preview box, so you can see exactly how the shadow looks before copying the CSS into your stylesheet.
Getting a shadow to look subtle and realistic rather than harsh usually means low opacity, a moderate blur, and a small offset — values that are fiddly to tune by editing numbers blind and refreshing the page. Adjusting sliders and watching the preview update live is much faster.
The generated value works directly in the box-shadow CSS property, and the same offset/blur/spread/color logic also applies to text-shadow with minor adjustments.
Spread expands or shrinks the shadow’s size independently of blur — positive values make the shadow larger than the element, negative values make it smaller.
Inset flips the shadow to render inside the element’s border rather than outside it, useful for a pressed or recessed visual effect.
This tool generates one shadow layer. Multiple box-shadow values can be combined by separating them with commas, which you can do manually after copying this one.
It gives you one representative shadow layer in that style. Both design styles conventionally layer two shadows (Material uses an umbra + penumbra pair; neumorphism uses a light shadow and a dark shadow on opposite corners for the embossed look) — stack this generated shadow with a second one (see above) for the complete effect.