CSS Neumorphism (Soft UI) Generator

Neumorphism, or soft UI, is a style where elements look extruded from the background. It uses a background that matches the page plus two shadows, a dark one and a light one on opposite corners, so the surface appears to softly rise or sink.

The soft UI effect relies on a single flat surface color shared by the element and the page. The light and dark shadows are tinted from that base color, so a mismatched page background breaks the illusion of an extruded shape.

Flat keeps a solid surface. Convex adds a gradient that bulges outward and concave dips inward, both using the same dual shadow. Pressed renders the shadows inset so the element looks pushed into the surface.

Distance sets how far the two shadows offset from the element. Intensity controls how far the light and dark shades diverge from the base color, so higher means more contrast. Blur softens the shadow edges.

Use it carefully. Low contrast soft UI can be hard to read and the borders are subtle, which may fail contrast guidelines for buttons and inputs. Keep intensity high enough for clear edges and pair it with accessible text and focus styles.

No. The preview and the generated CSS are computed entirely in your browser, and nothing you type is uploaded.