Build a soft-UI neumorphic effect visually
Build a soft-UI (neumorphic) raised or pressed effect visually, from a single base color, with copyable CSS.
Neumorphism works best on a flat, medium-lightness background, not pure white or black.
Intensity controls how much lighter and darker the two shadow colors are, relative to the base.
Pressed uses inset shadows for a 'pushed in' look, raised uses regular ones for a 'popped out' look.
Frequently asked
How does the neumorphic effect actually work?
It layers two box-shadows on the same element: a darker one offset toward the bottom-right and a lighter one offset toward the top-left, both derived from the base color. Together they simulate light hitting a soft, extruded surface.
Why does the preview sit inside a colored box instead of a plain background?
Neumorphism only reads correctly when the shadowed element and its background share the same base color. Against a mismatched background, the shadow colors look like arbitrary blotches instead of a soft 3D effect.
Is neumorphism good for accessibility?
Not always. Because it relies on subtle shadow contrast rather than strong color or border contrast, neumorphic buttons can be hard to distinguish from their background for some users. Consider pairing it with a visible focus state and testing contrast.