Micro Tools
Advertisement

Neumorphism CSS

Sculpt the soft UI look with sliders for distance, blur, intensity and radius. Switch between raised, pressed, concave and convex styles and copy the box-shadow CSS.

Soft UI controls

Neumorphism works best on a mid-tone gray background.

Preview and CSS
Soft UI
Advertisement

How the soft shadow trick works

Neumorphism fakes extruded plastic with two shadows: a dark one offset down-right and a light one offset up-left, on a background that matches the element. Your eye reads the pair as depth. The classic recipe uses a light gray base like #e0e5ec with shadows about 15 percent darker and lighter.

Raised versus pressed

Raised elements cast the shadow pair outward, so they look like they float above the surface. Pressed elements use inset shadows, so they look carved in, perfect for active button states or input fields. Concave and convex add a subtle diagonal gradient to suggest a curved surface.

Related tools

Image compressorShrink images to a target size or quality. Compress to exact KB. HEIC to JPG converterConvert iPhone HEIC photos to JPG, right in your browser. WebP converterConvert WebP to PNG or JPG.

Neumorphism CSS FAQs

Why does neumorphism only work on gray backgrounds?
The illusion depends on the element and the background being the same color. On white or very dark backgrounds the shadow pair loses contrast on one side and the depth effect collapses. Mid-tone grays around #e0e5ec give both shadows room to show.
How do I make a neumorphic button press effect?
Render the button raised by default, then swap to the pressed inset style on :active. Keep distance and blur identical between the two states so the transition looks like a physical press rather than a jump.
Is neumorphism accessible?
Often not by default. Low-contrast gray-on-gray fails WCAG contrast ratios, so use neumorphism for decorative containers and keep text and interactive controls at higher contrast. Never rely on the shadow alone to signal a button.
Can I use a colored base instead of gray?
Yes, pastel bases like soft blue #dbe4f0 or blush #f0dbe0 work. The tool derives the shadow pair from your base color automatically. Very saturated colors break the effect because the shadows start looking like glows.
Does box-shadow with two layers hurt performance?
No, multi-layer box shadows are cheap for the browser to paint. Neumorphism stays smooth even with many cards on the page, unlike backdrop blur which is far more expensive.
Advertisement