Neumorphism Generator
NewGenerate soft-UI neumorphic box-shadow effects with live preview and code output.
Soft UI controls
Generate raised or pressed neumorphism shadows from a single base color.
Preview
Generated CSS
Frequently Asked Questions
Can this make both raised and pressed neumorphism styles?
Yes. The checkbox toggles between a normal raised look and an inset 'Pressed UI' look by switching the shadow keyword and offset directions.
How are the light and dark shadow colors chosen?
They are derived automatically from one background color. The script mixes the base color toward black for the darker shadow and toward white for the lighter shadow, then applies alpha based on the intensity slider.
Can I choose separate colors for the two shadows?
No. This generator intentionally works from a single base color, so you control the result through background, distance, blur, intensity, radius, and inset mode rather than editing each shadow color directly.
What can I tune, and what are the slider limits?
You can adjust background color, border radius, offset distance, blur intensity, shadow intensity, and whether the style is inset. Radius and distance go from `0` to `50`, blur from `0` to `100`, and intensity from `0` to `100%`.
Does it generate anything besides `box-shadow`?
The output is intentionally small: `background-color`, `border-radius`, and `box-shadow`. It does not emit borders, gradients, or extra wrapper markup.