CSS Neumorphism & Soft UI Generator

Generate soft extruded and pressed neumorphic cards with light/dark shadow contrasts and shape styles.

CSS Neumorphism (Soft UI) Generator

Create modern Soft UI extruded and pressed neumorphic shadows with customized lighting.

Base Color

Shape Type

Distance12px

Blur Radius24px

Card Size160px

Corner Radius30px

Soft UI

CSS Code

border-radius: 30px;
background: #e0e5ec;
box-shadow: 12px 12px 24px #bdc2c9, -12px -12px 24px #ffffff;

About This Tool

CSS Neumorphism Generator calculates the dual light and dark shadow pairs required to produce tactile Soft UI (Neumorphic) surfaces, supporting flat, concave, convex, and inset pressed states.

Key Features

Automatic light and dark highlight shadow calculation

4 surface modes: Flat, Concave, Convex, and Inset

Distance, blur, and corner radius sliders

One-click CSS code copy

How to Use

1Pick your base background color.
2Choose shape type: Flat, Concave, Convex, or Inset.
3Adjust shadow distance, blur radius, and corner radius.
4Copy the generated Soft UI CSS code.

Why Use ToolSnippet CSS Neumorphism (Soft UI) Generator?

Calculates mathematically paired light and dark highlight shadows automatically.

Supports 4 distinct tactile surface shapes.

Live interactive canvas preview.

Tips for Best Results

Soft off-white (#e0e5ec) and light slate backgrounds yield the most realistic neumorphic lighting
Use inset pressed shadows for active button states and checkboxes

Frequently Asked Questions

What is Neumorphism / Soft UI?

Neumorphism is a design trend that uses dual soft shadows (one dark, one light) to make UI elements appear extruded directly from the background.

Why does the background color need to match the element color in Neumorphism?

Neumorphic effects rely on the illusion that the element is molded from the same physical surface as the background.

Related Tools

All Design & CSS Generators →

CSS Neumorphism & Soft UI Generator