Neumorphism Generator
Soft-UI surfaces from one color — light and dark shadows, four shapes, adjustable depth and light direction.
How the Neumorphism Generator Works
Generate soft-UI CSS from a single surface color — shadows, gradients and radius — with live preview.
One Color In
Pick the surface color and the tool derives both shadows — a darker shade and a lighter tint — so the element looks extruded from the background it sits on.
Four Shapes
Flat sits level with the surface, convex bulges out, concave dips in (both via a subtle gradient), and pressed uses inset shadows for an embossed well.
Light Direction
Choose which corner the light comes from — the light and dark shadows swap sides accordingly, matching the rest of your interface.
Depth Controls
Distance, intensity and blur control how far the element appears to rise. Blur follows distance automatically at a natural ratio, and you can fine-tune it after.
Frequently Asked Questions
A soft-UI style where elements share the background color and read as extruded or pressed purely through paired light/dark shadows — no borders, no contrast fills.
The illusion works because the element and the page share one surface. If the colors differ, it reads as an ordinary card with a shadow instead of an extrusion.
Its low contrast is the main criticism. Use it for decorative surfaces and large controls, keep text contrast WCAG-compliant, and add clear focus states — do not rely on the shadows alone for affordance.
They add a subtle diagonal gradient on top of the same shadows: convex is light-to-dark (bulging), concave is dark-to-light (dished). Pressed flips the shadows inside with inset.