Neumorphism Generator
Generate soft UI neumorphism shadows with live preview
About this tool
Neumorphism (or "soft UI") is a design style where an element appears to be extruded from or pressed into its background. The trick: the element and the surface behind it share the same color, and the only visible detail comes from two soft box-shadows — a light one on the side the light comes from and a dark one on the opposite side. The result reads as a tactile, monochrome relief.
Example: with surface color #e0e0e0, distance 10px, blur 20px and light from the top-left, the flat style produces box-shadow: -10px -10px 20px #ffffff-ish, 10px 10px 20px #bdbdbd-ish; — the element looks raised. Switch to Pressed and both shadows become inset, so the element looks carved in.
Because neumorphism depends on the background matching the element, you should set the same surface color on the container. The presets cover light, dark, and pastel surfaces so you can see how the effect changes.
FAQ
Why does my neumorphic element look flat or just like a normal box? ›
The element and its background must share the same color — if they differ, you get an ordinary card with shadows instead of the soft-UI look. Set the surface color on both the element and the container behind it.
What is the difference between Flat, Pressed, and Convex? ›
Flat (raised) uses two outer shadows and is the classic neumorphic button. Pressed flips both shadows to inset, so the element looks pushed into the surface — useful for active states and inputs. Convex combines outer shadows with opposing inset shadows to give a rounded, bead-like 3D effect.
How does the Light Source option work? ›
The light source decides which sides get the light and dark shadows. Top-left is the most common (matching how light hits a desk). Moving the light rotates the shadow pair, so the relief appears lit from a different angle.
Can I use neumorphism with arbitrary brand colors? ›
It works best on muted, mid-luminance surfaces. Very saturated or very dark/light colors leave little room for the light/dark shadow contrast, so the effect fades. The Intensity slider controls how far the shadow colors shift from the surface.
How is neumorphism different from glassmorphism? ›
Neumorphism (soft UI) uses paired light and dark box-shadows on an element that shares its background color with the container, creating a raised or pressed 3D relief. <a href="/glassmorphism">Glassmorphism</a> uses a semi-transparent background with backdrop-filter blur to create a frosted-glass effect that relies on content behind the element. Neumorphism works best for UI components like buttons and toggles; glassmorphism is great for overlays, modals, and cards over images.
How is this different from the Box Shadow Generator? ›
The Neumorphism Generator creates the soft-UI look where the element and background share one color and two paired shadows (light + dark) produce a raised or pressed relief. The <a href="/box-shadow">Box Shadow Generator</a> is a general-purpose shadow editor — you control offset, blur, spread, color, opacity, and inset layer by layer and can stack multiple independent shadows for realistic depth. Use this when you want the neumorphic aesthetic; use the Box Shadow Generator when you need custom shadows for cards, buttons, modals, or any other element.