How the two shadows in a neumorphic surface are built
Neumorphism, or soft UI, makes an element look pressed out of the surface behind it rather than floating above it. It does that with one box-shadow instead of the usual drop shadow: a dark copy offset down and to the right, where a light source at the top left would cast a shadow, and a light copy offset up and to the left, standing in for the highlight on the raised edge. Both shadows use the same offset distance and the same blur, only mirrored, which is what makes the result read as a single extruded shape instead of two stacked effects.
The generator derives both colours from the background you pick. It converts the background to RGB, then adds the same amount to every channel for the light shadow and subtracts it for the dark one, clamping at 0 and 255. The amount is the intensity slider multiplied by 255, so an intensity of 0.15 shifts each channel by 38. This is why the background colour is not decoration here: it is the input the whole effect is computed from, and the element only looks extruded while it sits on a surface of that exact colour.
Reading the generated CSS, value by value
With the defaults the tool starts on, a background of #e0e5ec with distance 20, blur 60 and intensity 0.15, the output is: background: #e0e5ec; border-radius: 40px; box-shadow: 20px 20px 60px #babfc6, -20px -20px 60px #ffffff. The first shadow is the dark one, 20 pixels down and 20 to the right with a 60 pixel blur. The second is the light one, 20 up and 20 left with the same blur. Together they trace the edge of a raised panel.
Work the colours back and the maths is visible. #e0e5ec is red 224, green 229, blue 236. Subtracting 38 gives 186, 191, 198, which is #babfc6. Adding 38 gives 262, 267, 274, all of which clamp to 255, which is why the light shadow lands on pure white here. That clamping is worth noticing: on a background this light, raising intensity further only darkens one side of the effect, because the other side has already run out of room.
Drop intensity to 0.06 on the same background and the amount becomes 15, producing box-shadow: 20px 20px 60px #d1d6dd, -20px -20px 60px #eff4fb. Neither side is clamped, both shadows carry a tint of the background, and the surface reads as a gentle swell rather than a hard edge. For real interface work the lower setting usually holds up better, since the clamped version tends to look like a white halo once it is next to text.
Flat, concave, convex, and pressed
The four shape buttons change what happens inside the element, not around it. Flat keeps the element the same solid colour as its background, so only the outer shadows do any work. Concave and convex replace that solid fill with a diagonal gradient at 145 degrees, running between the background lightened by 12 and darkened by 12. On #e0e5ec that gradient runs between #d4d9e0 and #ecf1f8; concave puts the dark stop first so the surface appears to dip inward, and convex reverses the two so it bulges outward. The shift is deliberately small, because a strong gradient stops looking like a curved surface and starts looking like a coloured panel.
Pressed is the one that changes the shadows themselves. It adds the inset keyword to both, so instead of falling outside the element they are drawn on the inner faces: box-shadow: inset 20px 20px 60px #babfc6, inset -20px -20px 60px #ffffff. The element now looks like a recess cut into the surface. Pairing flat or convex for the resting state with pressed for the active state is the standard way to build a neumorphic button, since the switch between them reads unmistakably as a press.
Picking distance, blur, and radius that hold together
Distance runs from 2 to 60 pixels and blur from 0 to 120, and the relationship between them matters more than either value alone. A blur of roughly two to three times the distance gives the soft, diffused look the style is known for, which is where the default pair of 20 and 60 comes from. Blur much below the distance produces two hard edged offset copies that look like a mistake, and blur far above it washes the shape out until only a faint glow is left.
Both values should also be scaled to the element. A 240 pixel card carries a 20 pixel offset comfortably; a 40 pixel toggle does not, and needs something closer to 4 or 6 with a blur around 12 to 18. If you are building a set of components, decide the ratio once and scale distance with the component size rather than reusing one shadow everywhere. The size slider here runs from 100 to 400 pixels, so preview a large card and a small control separately before settling on a value.
Corner radius goes up to 200 pixels. Generous rounding suits the style, because a soft shadow wrapping a sharp corner draws attention to the corner rather than the surface. Setting the radius to half the size turns the preview into a circle, which is how neumorphic icon buttons and dials are usually made.
Accessibility limits and dark backgrounds
The whole style depends on very low contrast between an element and its surroundings, which puts it in direct tension with accessibility. A button whose only boundary is a pair of soft shadows may have no detectable edge for someone with low vision, and shadows are not reliably conveyed to assistive technology at all. Keep the text inside the element at a normal contrast ratio against its background, give interactive controls a visible focus style that does not rely on shadow alone, and consider adding a faint border to anything the user has to find rather than merely look at.
Dark themes work, but not at every setting. Because the shadows are the background lightened and darkened by the same amount, a background near black has nothing left to darken toward and a background near white has nothing left to lighten toward. In both cases one shadow disappears and the effect collapses into a one sided glow. Dark neumorphism therefore wants a background that is a deep grey rather than true black, something in the region of #2a2d35, paired with a lower intensity than you would use on a light surface.
Copy the generated rule into your stylesheet and keep the background declaration with it. Pasting only the box-shadow line onto an element sitting on a different colour is the single most common reason the effect looks wrong once it leaves the preview.