Design a soft-UI neumorphic card visually. Tune the base color, independent light and dark shadows, radius and inset mode, then copy ready-to-use CSS.
🔒 Everything runs locally — no data is uploaded.
Neumorphic, or soft-UI, elements sit on a background that is nearly the same color as the element itself. Depth comes entirely from two opposing box shadows: a light shadow on the side facing an imaginary light source, and a darker shadow on the opposite side. Switching those two shadows to inset makes the same element look pressed into the surface instead of raised above it.
Control offset, blur and color separately for the light and dark shadow to match any light direction.
Toggle outset and inset instantly to preview both states of a button or card.
Get a single background and box-shadow declaration ready to paste into your stylesheet.
Neumorphism, or soft UI, is a style where an element appears to be molded from the same material as its background using two opposing box shadows: a light one and a dark one on opposite sides.
One lighter shadow simulates a highlight and one darker shadow simulates an ambient shadow. Together they create the illusion of a raised or pressed surface without a visible border.
Outset shadows make the element look like it is raised above the background, while inset shadows make it look pressed into the background, like a button being held down.
Neumorphism relies on the element and its background sharing nearly the same color so the only depth cue comes from the two shadows, not from a color contrast or border.
Because contrast is intentionally low, neumorphic components need extra care with focus states, text contrast and hit targets to remain accessible.