Live Preview4 Shape TypesCopy CSSFree
border-radius: 30px;
background: #e0e0e0;
box-shadow: 10px 10px 20px #bababa, -10px -10px 20px #ffffff;

How It Works

1

Choose Color

Pick a background color. Shadow colors are calculated automatically.

2

Adjust Settings

Control distance, intensity, blur, and select a shape type.

3

Copy CSS

Click Copy to get the complete CSS for your project.

Frequently Asked Questions

What is neumorphism?
Neumorphism (soft UI) is a design style that uses subtle shadows to create elements that appear extruded from or pressed into the background.
What shapes are available?
Flat, Concave, Convex, and Pressed shapes that change how the element appears relative to the surface.
How does the color affect the result?
The background color determines the shadow colors. Lighter and darker versions of your chosen color create the 3D effect.
Is neumorphism accessible?
Use neumorphism thoughtfully as low-contrast designs can be harder for some users to perceive. Combine with clear labels.
Share:

Explore More

Love this tool? Explore 999+ more

Free online tools for images, PDFs, text, code, and more. All running in your browser.

Explore All Tools