Introducing the Neumorphism Generator — Soft UI CSS in Seconds

Neumorphism — the soft, tactile “soft UI” look — is gorgeous when it works and broken when it doesn’t, and the difference comes down to a handful of finicky shadow values. The new Neumorphism Generator dials them in for you with a live preview, so you can copy correct CSS in seconds.

What it does

• Two balanced shadows — a dark shadow and a light highlight, derived from your base colour.
• Four shapes — flat, concave, convex, and pressed (inset) for active states.
• Live preview — rendered on a matching background so the effect reads correctly.
• Copy-paste CSS — wrapped in a ready-to-use class, plus the derived shadow colours.
• Full control — size, radius, distance, blur, and intensity.

Why it matters

The soft-UI effect only works when the element and its background share the same colour — the single most common thing people get wrong by hand. Our guide to neumorphism in CSS explains how the two shadows create depth and how to use the style accessibly. For shadows generally, the box-shadow generator is a great companion.

Free, and private

The Neumorphism Generator is free and runs entirely in your browser — nothing you enter is uploaded or stored. It’s a focused, one-shot tool: dial it in, copy the CSS, and go.