Privacy Protected

Neumorphism Generator

Generate Soft UI CSS code for neumorphic elements

Visual Settings

Shape and lighting configuration

Base Color

Surface Shape

Size300px

Radius50px

Distance20px

Blur60px

Intensity0.15

CSS Output

Copy and paste into your project

background: #e0e5ec;
box-shadow: 20px 20px 60px #d1d6dd, -20px -20px 60px #eff4fb;
border-radius: 50px;

Live Preview

Visual simulation

Neumorphism

Design Soft UI Neumorphic Elements

Generate soft UI (neumorphic) CSS code. Customize intensity, shape, and lighting direction. Perfect for modern web design.

Pick Background

Select a base color for your UI (mid-tones work best).

Choose Style

Select between flat, pressed, or curved (concave/convex) surfaces.

Adjust Light

Drag the light source to change how shadows fall on the element.

Copy Code

Copy the box-shadow properties for your CSS.

Neumorphism, or Soft UI, is a design style that uses highlights and shadows to create elements that appear to emerge from or sink into the background. It provides a tactile, physical look to buttons, inputs, and cards. Our generator ensures the contrast between your element and the background is perfect for that elite "soft" look.

Key Features

Dual Shadows

Generates the signature light and dark shadow pair.

Multiple Shapes

Support for Flat, Concave, Convex, and Pressed styles.

Visual Lighting

Change the light source direction interactively.

Accent Colors

Works with any background color of your choice.

Frequently Asked Questions

Neumorphism works best on mid-tone backgrounds where you can use both a lighter and darker shade for the shadows.

Neumorphism can have low contrast, so it is important to use it with accessible text and clear focus states.

The 'pressed' or 'inset' look is achieved by using the 'inset' keyword in the box-shadow CSS property.

Last updated on March 1, 2026