This writes neumorphism code: one light shadow and one dark shadow over a surface that shares its background color, producing a raised or sunken look. Enter a distance, blur, intensity and light direction, and the HEX of both shadows is worked out and shown in the preview above.
The light and dark colors are made by mixing the surface color linearly toward white and toward black by the intensity you enter, in gamma-encoded sRGB channels. Following the light direction, the dark shadow is pushed to the opposite side and the light shadow toward the light by the same distance. The pressed variant simply adds inset to both shadows. The ordering of box-shadow values follows W3C CSS Backgrounds and Borders (as of October 2026).
Because the effect only reads when the surface and the parent share one color, the parent background declaration is included in the output. No recommended distance, blur or intensity is given. Contrast is also low by nature, so important buttons need contrast secured by other means.
Frequently asked questions
Neumorphism fakes a raised or sunken surface using only two shadows, which works when the surface and its background share one color. On a different background the shadows read as a border instead.
This tool offers no correct numbers. The same values look entirely different depending on surface lightness and element size, so judging by eye is more accurate.
The surface color is mixed linearly toward white and toward black by the intensity you enter, in gamma-encoded sRGB channels. Both results are shown as HEX.