Skip to main content
7BBusyBoss

Neumorphism CSS Generator — Soft UI Shadows

Generate the neumorphism / soft-UI effect: dual light and dark shadows with radius and distance. Live preview, copy-ready CSS, free.

#e0e5ec
40px
20px
40px
border-radius: 40px;
background: #e0e5ec;
box-shadow: 20px 20px 40px rgb(186, 191, 198),
            -20px -20px 40px rgb(255, 255, 255);
About this tool

The soft-UI look

Neumorphism makes elements look extruded from the background using two shadows — a dark one and a light one on opposite corners. Pick the background, distance, blur and radius and copy the CSS.

Tips

  • The element and its container must share the same background color — that's what sells the "carved from the surface" effect.
  • Use inset for a pressed/active state.
  • Keep contrast subtle; it works best on light grey surfaces.

How to use the Neumorphism Generator

Takes about a minute. No signup, no download, your data stays in your browser.

  1. 1
    Open the tool. Scroll up to the Neumorphism Generator above — it loads instantly in your browser, no install needed.
  2. 2
    Enter your values. The fields come pre-filled with realistic defaults so you can see how it works — replace them with your own numbers.
  3. 3
    Read the result. The output updates instantly. Copy or share it — nothing is uploaded to a server, everything stays on your device.

Frequently asked questions

Common questions about the Neumorphism Generator.

What is neumorphism?

A soft-UI style where elements appear extruded from the background using paired light and dark shadows.

Why doesn’t my neumorphism look right?

The element and the page must share the same background color — the effect relies on that.

How do I make a pressed/inset look?

Toggle inset, which draws the shadows inside the element.

What background works best?

A light grey; very dark or saturated backgrounds make the dual shadows hard to read.

Community rating

Discussion (0)

No comments yet. Start the discussion.

Keep exploring

Related tools across 7BusyBoss — all free, all instant.