Neumorphism CSS Generator — free online

You want that soft, pillow-like look where a button seems to push out of the page, or sink gently into it. But getting the two shadows just right by hand takes a lot of guessing and a lot of pasting back and forth. We added a free tool that does it for you — Neumorphism Generator — right in your browser.

What it does

It designs soft-UI elements with a pair of shadows: one light, one dark, so the shape looks raised (outset) or pressed-in (inset). You pick the base color, the blur, and the depth, and the preview updates as you go. When it looks right, you copy the CSS straight into your project.

Nothing leaves your device

The whole thing runs inside your browser. Your colors and settings stay on your screen — nothing is uploaded, nothing is saved on a server. Close the tab and it's gone.

How to use it

  1. Open Neumorphism Generator and pick your base color.
  2. Slide the blur and depth until the shape looks raised or pressed the way you want.
  3. Copy the CSS and paste it into your project.

It's free with no limit. There are more small tools on the Apps page.

Get new posts

Soon you'll be able to drop your email and get new posts — no account, no spam.

Email sign-up isn't live yet — nothing is collected for now.