CSS neumorphism generator
Adjust the background color, distance, blur, and intensity to create a neumorphism effect (soft shadow mimicking embossing) and get the corresponding CSS code, with live preview. The calculation is done entirely in your browser.
How it works
Neumorphism gives the illusion that an element is slightly raised or recessed into its background, thanks to two opposite shadows in the same color as the background: a lighter one toward the top-left, and a darker one toward the bottom-right. This tool calculates these two shades from the chosen background color and builds the corresponding box-shadow property live.
Why do the two shadows need the same base color?
The neumorphism effect relies on a brightness variation of a single, same color (the background), rather than contrasting colors like in a classic shadow; it's this closeness of hue that gives the soft, "molded" feel characteristic of the style, rather than a traditional drop shadow.
On which elements should you use this effect?
Neumorphism works well on buttons, cards, form fields, or icons on a plain light or dark background; however, it's hard to read on an image or gradient background and sometimes has accessibility issues due to lack of contrast, so test it before large-scale use.
No data is sent to a server: the shadow composition is done entirely in your browser.