Neumorphism Generator

Create soft UI shadow effects with the neumorphic design style

Preview

Colors:

Controls

Size 200px

Border Radius 20px

Distance 10px

Intensity 15

Blur 20px

CSS Code

background: #e0e5ec;
border-radius: 20px;
box-shadow: 10px 10px 20px #c2c7ce, -10px -10px 20px #feffff;

Related Tools

Tailwind Color Generator

Generate comprehensive Tailwind CSS color shades from a single base color

Lighten Color

Make colors lighter by adjusting their brightness and luminosity

Darken Color

Make colors darker by reducing their brightness and luminosity

CSS Gradient Generator

Create beautiful CSS gradients with advanced controls for linear, radial, and conic gradients. Real-time preview and export options.

Box Shadow Generator

Generate stunning CSS box shadows with live preview, multiple layers, presets, and export options for web design

Color Palette Generator

Generate beautiful color palettes with various color harmony algorithms. Export to CSS, SCSS, Tailwind, JSON and more

What is Neumorphism?

Neumorphism (or "Soft UI") is a design aesthetic that combines flat design with subtle 3D effects using soft shadows. Elements appear to extrude from or push into the background, creating a tactile, almost physical feel.

This generator creates neumorphic effects using CSS box-shadow. The technique uses two shadows—one light and one dark—to simulate how light falls on raised or recessed surfaces.

Neumorphic Shapes

Flat

Standard raised element with outer shadows.

Concave

Curved inward with gradient darkening toward center.

Convex

Curved outward with gradient brightening toward center.

Pressed

Inset shadows for buttons or active states.

Design Tips

Use muted colors: Neumorphism works best with soft, desaturated backgrounds.
Match element to background: The element color should be similar to the background.
Consider accessibility: Low contrast can be hard for users with visual impairments.
Use sparingly: Too many neumorphic elements can look overwhelming.

Frequently Asked Questions

Is neumorphism accessible?

It can be challenging. The soft shadows create low contrast. Always pair with other visual cues like icons or text.

Does neumorphism work on dark backgrounds?

Yes, but it's trickier. You need to adjust shadow colors. Dark neumorphism uses lighter shadows on top-left and darker on bottom-right.