Neumorphism Generator is a free online CSS tool for building the soft-UI (neumorphism) shadow effect with precise, numeric control over every parameter that makes it work: base color, shadow distance, blur radius, shadow intensity, corner radius, and element shape. Drag a slider and the preview and the generated CSS update in the same frame — no build step, no design software, no guesswork on the color math.
Neumorphism, sometimes written "neumorphism" as a portmanteau of "new" and "skeuomorphism," became popular around 2019–2020 as a reaction against flat design's total lack of depth. Instead of drop shadows floating an element above the page, neumorphism makes an element look like it is molded out of the same material as its background — pressed, embossed, or extruded from a single continuous surface. It achieves this using nothing but two offsetting box-shadows: one lighter shadow positioned toward the simulated light source (usually top-left) and one darker shadow positioned opposite it (bottom-right). The eye reads that light/dark pairing as physical depth the same way it reads shading on a real embossed surface.
The part that trips people up when they try to hand-code this in CSS is that the three colors involved — the background surface, the light shadow, and the dark shadow — cannot be picked independently. They have to be derived from one shared base hue: the light shadow is that hue pushed brighter, the dark shadow is the same hue pushed darker, and the element itself typically matches the surface color exactly. Get that math even slightly wrong and the soft, molded look collapses into an ordinary, ugly double-shadow. This generator removes that failure point entirely — pick one base color and it computes correctly balanced light and dark shadow values automatically, in RGB, scaled by the intensity slider you set.
Four shape modes cover the situations neumorphism actually gets used for in real interfaces: flat (a raised, embossed surface — good for cards and idle buttons), convex (a domed, outward curve — good for toggle knobs and prominent CTAs), concave (an inward curve — good for wells, inputs, and progress tracks), and pressed (an inset, sunken look created with inset box-shadow — the standard way to represent an active or clicked state). Because the tool renders all four states live, you can design a button's entire idle-to-pressed interaction sequence without writing a single line of CSS until you are satisfied with how it looks.
Need to convert the base color to another format for your design system? Color Converter handles HEX, RGB, and HSL together.
