CSS Neumorphism Generator
Pick one base color and get a matched light/dark soft-UI shadow pair, ready to paste as box-shadow.
About the Neumorphism Generator
Neumorphism (soft UI) works by casting one light shadow toward the top-left and one dark shadow toward the bottom-right, both mixed from the same base color so the surface still reads as a single material. This tool converts your chosen hex color to HSL, then raises the lightness for the light shadow and lowers it by the same amount for the dark shadow (each clamped to the 0-100% range), before converting back to hex. Higher intensity pushes those two shades further apart for a deeper carved or embossed look, while the shape select swaps between an outward raised effect and an inward pressed one by toggling the inset keyword on both shadows.
The one requirement that makes or breaks this entire technique
Neumorphism only works when the shaped element's background color matches, or very closely matches, the background color of whatever it sits on top of. That's why this tool sets both the surrounding stage and the preview card to the exact same base color, the illusion depends on the element visually blending into its surroundings except for the two soft shadows implying it's either raised above or pressed into that surface. Copy the generated CSS onto an element that sits against a different-colored background, a white card on a colored page section, for example, and the effect breaks immediately: instead of looking like a smooth extrusion of the same material, you'll just see two oddly-colored, disconnected shadow blobs around a mismatched box. If you reuse this generator's output elsewhere, make sure the target element's own background is set to the same hex value used here.
An honest note: Concave and Pressed In produce identical CSS
Looking at the underlying logic, the inset keyword gets applied whenever the style is either concave or pressed, both conditions trigger the exact same code path, so these two dropdown options generate byte-for-byte identical box-shadow output. There's no additional distinction in the generated CSS between a "pressed-in" look and a "concave" look here, despite the different labels suggesting they might differ. If you're choosing between them, know that visually and in the copied code, they're the same result.
Why "Flat" removes the shadow entirely instead of softening it
Selecting the Flat style doesn't produce a milder version of the raised or pressed effect, it sets box-shadow: none outright, leaving just the flat-colored, rounded-corner box with no depth cue at all. In a real soft-UI component system, this is typically used for a disabled or inactive state, an element that's visually present but intentionally reads as non-interactive, sitting flush with its background rather than appearing raised (clickable-looking) or pressed (currently active).
A known usability criticism worth being aware of
Neumorphism has a well-documented accessibility weakness: because the technique deliberately minimizes contrast between an interactive element and its background (that's what makes the "same material" illusion work), it can make buttons, cards, and controls genuinely harder to distinguish for users with low vision, and it tends to fail WCAG contrast guidelines if applied to anything beyond decorative surfaces. It's best reserved for supplementary visual flourishes, like a card container or a toggle's track, layered with clearly higher-contrast text, icons, and interactive states on top, rather than relied on as the sole way to indicate that something is clickable.
Why the two shadows always point in opposite diagonal directions
The light shadow is always offset up and to the left (negative x and y), while the dark shadow is always offset down and to the right (positive x and y), using the identical distance and blur values for both. This mirrors how a single light source positioned at the upper-left of a scene would realistically illuminate a raised surface: the side facing the light catches a soft highlight, and the opposite side falls into a soft shadow. Keeping the offsets as exact mirror images of each other, rather than independently adjustable, is what keeps the surface looking like one physically coherent object instead of two randomly placed shadow effects.
Frequently Asked Questions
Why does my copied neumorphism CSS look wrong on a different colored background?
Neumorphism only works correctly when the element's own background matches the background of whatever it sits on. The illusion depends on the element blending into its surroundings except for the two soft shadows. Applying it to a mismatched background breaks the effect entirely.
What's the actual difference between the Concave and Pressed In shape options?
None in the generated CSS, both trigger the same inset condition in the underlying logic, producing byte-for-byte identical box-shadow output despite having different labels in the dropdown.
What does selecting the Flat style actually do?
It removes the box-shadow entirely (box-shadow: none) rather than producing a softer version of the raised or pressed effect. This is typically used to represent a disabled or inactive element that should read as flush with its background.
Is neumorphism considered accessible?
It has a well-known usability weakness: minimizing contrast between an element and its background, which is core to the effect, often fails accessibility contrast guidelines. It's best used for decorative or supplementary surfaces with clearly higher-contrast text and controls layered on top.
Why are the light and dark shadow colors derived from my base color instead of plain white and black?
Using lightness-shifted versions of the same base color, rather than generic black and white, is what makes the surface read as one coherent material rather than a color plus an unrelated shadow. Real light rarely produces perfectly neutral gray shadows on a colored surface.
What happens if I increase the Intensity slider all the way up?
It pushes the light and dark shadow colors further apart in lightness (up to a 30-point HSL lightness shift in each direction), producing a deeper, more dramatically carved or embossed appearance rather than a subtle one.