Neumorphism Generator

The neumorphism generator writes the soft UI shadow recipe — a background colour, a two-sided box shadow and a corner radius — with sliders for distance and blur.

What is Neumorphism Generator?

• The neumorphism generator has three controls, and the first is the one that defines the style: a Background colour that sets both the element and the surface it sits on.
• Distance, from two to forty pixels, sets how far the two shadows are offset; blur, from two to eighty, sets how soft their edges are.
• The preview shows a rounded square floating in a larger panel of the same colour, so the effect is judged as it will actually appear.

The CSS card holds three declarations, and together they are the complete neumorphism css recipe — the surface colour, the paired shadow and the radius. Reading the output as soft ui shadows rather than as a shadow is the mental shift the style requires. The first paints the background. The second is the interesting one — a box shadow with two entries, the first offset down and to the right in a darker tone, the second offset up and to the left in a lighter tone. That pairing is the entire technique: where a conventional shadow models light coming from one direction and blocking on the far side, this models an element pressed out of, or into, a surface that shares its colour. The third declaration rounds the corners, and the rounding matters more than it looks, because a soft shadow on a square corner reads as a glow rather than as moulded material.

Both shadow colours are derived rather than chosen. The darker entry is the background colour reduced in brightness by a fixed amount, and the lighter entry is the background colour raised by the same amount, so the relationship between the three is preserved whatever colour you pick. That is why the tool needs only one colour field: the shadows are always eight percent of lightness away from the surface in each direction, which is the standard proportion for the effect.

• That derivation explains the style's signature constraint: because the shadow colours are close to the background, the effect only reads where the surface is a mid-tone with room on both sides.
• On pure white there is nothing lighter to highlight with and the raised edge disappears; on near-black there is nothing darker to shade with.
• Colours in the light-middle range — greys, pale blues, soft greens — are where it behaves, which is exactly the range the default sits in.

The two sliders control how pronounced the moulding is. Distance sets how far the light appears to travel, and with it how deep the element seems to sit; large values with a small blur produce a hard-edged, almost cartoonish relief, while small values keep it subtle. Blur controls the softness, and a blur that is much larger than the distance produces the diffuse, pillow-like appearance the style is known for.

What the tool does not offer is worth stating plainly. There is no inset variant, so a pressed or recessed state — the usual way a soft UI button shows interaction — cannot be generated here and has to be written by hand; the CSS is short enough to adapt. The corner radius is fixed at twenty pixels. There is no second surface colour, so the element and its background are always the same value. And since the shadow tones are derived rather than picked, a design that wants warm highlights on a cool surface is out of reach.

Used as a neumorphism generator, though, it covers the parts that are tedious: computing two derived tones and writing the paired shadow correctly. As a css box shadow generator it produces one very specific recipe, and as a starting point for a soft UI design it hands over the recipe as a copyable block so a raised surface can be styled in one paste. Used as a soft ui design generator, the three declarations it returns are the foundation of the whole style, and the two derived tones are the part most people get wrong when writing it by hand.

How to use Neumorphism Generator

1. Set the Background colour — a mid-tone works best, since the shadows are derived from it.
2. Adjust Distance to control how far the surface appears to lift.
3. Adjust Blur for softness; a blur much larger than the distance gives the pillow-like look.
4. Copy the block and add an inset variant by hand if you need a pressed state.

When to use Neumorphism Generator vs related tools

Use this when a light, tactile surface is wanted — dashboard cards, resting buttons, control panels. Use the glassmorphism generator when the surface should be translucent over an image instead of moulded out of its background. A shadow that belongs to its surface without the moulding is what the shadow color generator derives, and when two shadows are more than the design needs, the box shadow color tool builds a single one with its geometry and colour exposed.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about Neumorphism Generator