Neumorphism (or soft UI) is a design style that simulates extruded plastic surfaces using light and dark shadows on a monochromatic background. It creates a tactile, raised or indented look without actual images.

Why do I need two shadow colors?

Neumorphism uses two shadows: a lighter shadow on the top-left (simulating a light source from the top-left) and a darker shadow on the bottom-right. This dual-shadow effect creates the illusion of depth and material thickness.

What is the difference between flat, concave, convex, and pressed?

Flat has uniform surface color. Concave uses a gradient that dips inward. Convex uses a gradient that bulges outward. Pressed reverses the shadow directions to simulate a button being pushed in.

Does neumorphism work on any background color?

Neumorphism works best on medium-value colors — not too dark, not too light. Very dark or very light backgrounds reduce the visible shadow contrast. Mid-range grays and muted pastels give the best results.

Design Free No signup

CSS Neumorphism Generator

Generate CSS neumorphism / soft UI box-shadow styles with live preview.

Loading tool…

About this tool

Design soft, extruded UI elements with the CSS Neumorphism Generator. Adjust background color, shadow distance, blur radius, shadow intensity, and shape style (flat, concave, convex, or pressed). The generator automatically calculates the correct light and dark shadow colors from your base color, producing the signature neumorphic look. Copy the generated CSS box-shadow code straight into your stylesheet.

How to use

1 Pick a background color using the color picker.
2 Adjust the shadow distance, blur radius, and intensity sliders.
3 Select a shape style: flat, concave, convex, or pressed.
4 Preview the result on the live shape preview.
5 Click 'Copy CSS' to copy the generated box-shadow code.

Frequently Asked Questions

Related tools

CSS Gradient Generator

Visually build CSS linear and radial gradients and copy the ready-to-use CSS property.

Box Shadow Generator

Build CSS box-shadow values visually with live preview — supports multiple layers.