CSS Neumorphism Generator

What it does

The CSS Neumorphism Generator turns a color picker and three sliders into a ready-to-paste "soft UI" CSS block. Neumorphism (a blend of "new" and "skeuomorphism") is the design trend where interface elements appear to be molded from the same material as their background — extruded out of the surface, or pressed into it — using nothing but a background color and a pair of offset shadows. There's no gradient trickery or image asset behind the effect: the illusion comes entirely from placing one shadow that's lighter than the background (simulating a light source) opposite one that's darker (simulating the shadow it casts).

The properties it generates

background: <color or gradient>;
border-radius: Npx;
box-shadow: Dpx Dpx Bpx <darker>, -Dpx -Dpx Bpx <lighter>;

• background — your base color as-is for the Flat style, or a soft diagonal gradient between a slightly lighter and slightly darker shade for Convex (raised) and Concave (pressed) — the gradient direction reverses between the two, which is what makes one read as bulging out and the other as sunken in.
• border-radius — rounded corners from the Border Radius slider. Neumorphic elements are almost always rounded; sharp corners break the "molded material" illusion.
• box-shadow — two shadows offset by the Distance slider in opposite directions: a darker shade toward the bottom-right (as if lit from the top-left) and a lighter shade toward the top-left. Both share the same Blur radius, so they fade into the background at the edges instead of showing hard shadow lines.

The lighter and darker shades are derived from your base color by nudging each RGB channel toward white or black by a fixed amount — the same lighten/darken math the effect has used since the trend's original 2019/2020 "Neumorphism in User Interfaces" popularization.

How to use it

1. Pick a Background Color — it's the base every shadow and gradient in the output is derived from, so the effect works best on a mid-tone, low-saturation color (the classic neumorphic palette is a soft grey like #e0e5ec; very dark or very saturated colors reduce the contrast the shadows need).
2. Choose a Style: Flat for a solid-color panel with just the raised shadow pair, Convex to add a gradient that reads as bulging outward, or Concave to reverse that gradient so the panel reads as pressed inward.
3. Drag Distance to set how far the light/dark shadows extend from the element, and Blur to control how soft their edges are — larger blur values with a matching distance give the smoothest "molded" look.
4. Set Border Radius for how rounded the panel's corners are.
5. Copy the generated CSS and apply it to any block-level element with a background matching (or close to) the color you picked — neumorphism only reads correctly when the element's surroundings share its base color, since the shadows are calibrated against it.

FAQ

Why does my element look flat instead of "soft UI"? The parent/page background must match (or very nearly match) the color you picked here. Neumorphism relies on the element blending into its surroundings except for the two subtle shadows — drop it onto a white page with a grey base color and the illusion breaks.

Why is neumorphism considered an accessibility risk? The whole effect depends on very low contrast between the element and its background, which is exactly what accessibility guidelines (like WCAG contrast ratios) warn against. Use it for decorative surfaces and low-stakes UI, not for text, buttons, or anything a user must be able to distinguish at a glance.

Can I get the true "pressed in" look with an inset shadow? This generator's Concave style simulates a pressed look by reversing the background gradient rather than switching to CSS inset shadows. If you need a literal inset shadow, add the inset keyword to each box-shadow value in the generated CSS.

Does this tool store or upload my color choices? No. Everything runs locally in your browser — nothing you enter is sent to a server or saved.