CSS Neumorphism Generator

What neumorphism is and why it needs two shadows

Neumorphism — short for "new skeuomorphism," also called soft UI — makes an element look like it was pressed out of, or into, the same material as the page behind it. There is no border and no contrasting fill; the entire illusion of depth comes from two box-shadows of the same shape but opposite color and direction. Pretend a light shines from the top-left. The top-left edge would catch that light, so it gets a lighter shadow; the bottom-right falls into shade, so it gets a darker shadow. Your eye reads those two cues as a raised bump. This generator builds that effect for you and writes the CSS.

How the tool derives the shadow colors

You only pick one color — the background. The generator computes both shadow colors from it automatically, so they always stay in the same family as the surface (this is what separates true neumorphism from a generic drop shadow). It converts your hex to RGB, then:

• Light shadow = your color with each RGB channel raised by intensity × 0.6.
• Dark shadow = your color with each channel lowered by the same amount.

So at the default intensity of 50, the offset is round(50 × 0.6) = 30 points lighter and darker. The signature default color #e0e5ec (a cool off-white, RGB 224/229/236) therefore produces a light highlight of roughly #fefffe-ish and a dark shadow near #c2c7ce. The final rule looks like:

box-shadow: 10px 10px 20px #a0a5ac, -10px -10px 20px #ffffff;

The first shadow (positive offset) is the dark one going down-right; the second (negative offset) is the light one going up-left.

The four shape styles

The difference between Concave and Convex is purely the direction of a subtle 145° gradient. Pressed is the most distinct: it flips both shadows to inset, so the light and dark land on the inside edges and the element appears carved into the surface — ideal for an active/toggled button state to pair with a flat resting state.

The slider that matters most

• Shadow Distance (1–50px) sets the offset of both shadows. Larger distance reads as a taller, more lifted element.
• Blur Radius (1–100px) softens the shadow edge. A good rule of thumb is to keep blur near double the distance — the default 10px distance with 20px blur is exactly that ratio.
• Shadow Intensity (5–100) controls how far the two shadow colors diverge from the base, i.e. the contrast of the effect.

A worked example

Keep the default #e0e5ec background but switch the shape to Pressed and drop the distance to about 6px with 12px blur. The generated rule uses inset shadows, producing a shallow indented pill — the look of a selected tab. Now duplicate the element, set it back to Flat at the same color, and you have a matched pair: flat for the unselected tabs, pressed for the active one, all carved from one background color. Copy each rule with the Copy CSS button and drop them into your stylesheet under a .neumorphic class.

Common mistakes

• Using a pure white or near-black background. Lightening white has nowhere to go and darkening black is invisible, so the effect vanishes. Neumorphism needs a mid-tone — soft grays and muted pastels work best, which is why the default is an off-white, not #ffffff.
• Forgetting the surface must match. The element's background must be the same color as the page region it sits on. Put a neumorphic card on a contrasting background and it looks like a floating box, not an extrusion. The preview deliberately paints the wrapper the same color to show this.
• Ignoring accessibility. Neumorphism is famously low-contrast. Buttons can be hard to distinguish from the background for users with low vision. Reserve it for decorative surfaces, and add clear focus and text contrast for anything interactive.
• Cranking intensity too high. Large intensity values push the shadows toward harsh black and white, which breaks the soft-plastic illusion. Keep it moderate.

Privacy and browser support

The box-shadow and gradient properties this tool emits are supported by every modern browser with no prefixes required. Everything is computed locally — the color math, the live preview, and the generated CSS all run in your browser, and nothing is sent to a server. Copy the code and it is yours.