Neumorphism Generator

Generate soft UI neumorphic designs with customizable shadows and shapes.

Appearance

Background Color

Shape

Border Radius24px

Shadow

Distance10px

Blur30px

Intensity0.15

Preview

Generated CSS

background: #e0e5ec;
border-radius: 24px;
box-shadow: 10px 10px 30px hsl(215, 24.000000000000032%, 75.19607843137256%), -10px -10px 30px hsl(215, 24.000000000000032%, 100%);

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS Neumorphism Generator?

Generate soft-UI neumorphism effects using layered box shadows. Set light source direction, distance, and surface colour, then copy the CSS.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Neumorphism Generator

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Pick your surface colour

Select the background colour. This colour must also be the page background - neumorphism only works on matching surfaces.

Set shadow distance and blur

Adjust the offset (how far the shadows extend) and blur radius. Larger offsets work with larger elements.

Toggle raised or pressed state

Switch between the raised (outset) and pressed (inset) shadow configurations. Copy the CSS for both states to handle interactive elements.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

styles.css

/* Neumorphic card - light source from top-left */
.neo-card {
  background: #e0e5ec;
  border-radius: 16px;
  box-shadow:
     6px  6px 12px rgba(166, 180, 200, 0.7),
    -6px -6px 12px rgba(255, 255, 255, 0.8);
}

/* Inset / pressed state */
.neo-card.pressed {
  box-shadow:
    inset  4px  4px 8px rgba(166, 180, 200, 0.7),
    inset -4px -4px 8px rgba(255, 255, 255, 0.8);
}

Neumorphism works only on monochromatic surfaces. The background colour of the element must match the page background exactly.

Pro tips

Pro tips for better results

★

Neumorphism fails WCAG contrast requirements in most cases

The soft shadows that define neumorphism create very low contrast between the component and its background. Test all interactive neumorphic elements against WCAG AA (4.5:1 for text, 3:1 for UI components).

★

Use neumorphism only on non-critical decorative surfaces

Buttons, form controls, and navigation items need clear affordance. Neumorphism makes it unclear what is clickable vs. decorative.

★

The background colour must exactly match the page background

If the element background-color and page background-color differ by even a small amount, the shadows look wrong. Use CSS variables to ensure they always match.

FAQ

Frequently asked questions

Neumorphism (or soft UI) is a design style that uses matched light and dark box shadows on same-colour surfaces to simulate 3D depth. Elements appear to extrude from or press into the surface. It gained popularity in 2020 as an evolution of skeuomorphism.

Generally no. The low contrast between elements and backgrounds fails WCAG AA requirements for most colour combinations. It is also hard for users with low vision to identify interactive elements. Use it sparingly and only for decorative purposes.

No. Everything runs in your browser. Nothing is sent to a server.