Neumorphism Generator

Create soft UI (Neumorphism) designs with realistic shadows. Generate CSS for buttons, cards, and UI elements with that soft, extruded look!

Preview

Shape Type

Background Color

Size: 200px

Border Radius: 50px

Shadow Distance: 20px

Shadow Blur: 60px

Shadow Intensity: 15%

Presets

CSS Code

/* Neumorphism Effect */
border-radius: 50px;
background: #e0e5ec;
box-shadow: 20px 20px 60px #babfc6, -20px -20px 60px #ffffff;

Features

Live preview with adjustable size
4 shape types: flat, concave, convex, pressed
Customizable shadow distance & blur
Intensity control for shadows
Color picker for background
Pre-made presets
Copy-ready CSS code

How to Use

1
Choose a background color (works best with soft colors)
2
Select a shape type (flat, concave, convex, pressed)
3
Adjust distance, blur, and intensity
4
Set border radius for the element
5
Copy the generated CSS code

Frequently Asked Questions

What is Neumorphism?

Neumorphism (or Soft UI) is a design style that combines skeuomorphism and flat design, creating elements that look like they're extruded from the background.

What colors work best?

Neumorphism works best with soft, muted colors. Very light or very dark colors tend to produce the best shadows.

What's the difference between the shapes?

Flat has no gradient. Concave looks pressed in. Convex looks raised. Pressed uses inset shadows for a pushed button look.

Is Neumorphism accessible?

Neumorphism can have accessibility issues due to low contrast. Always ensure sufficient contrast for interactive elements.

Back to Design Tools