Neumorphism Generator

Create soft-UI neumorphic CSS shadows with a live preview. Adjust dimensions, blur, colors, and grab ready-to-use CSS.

Quick Presets

Shadow Effect Style

Distance 20px

Blur Radius 60px

Shadow Intensity 0.15

Border Radius 30px

Box Size 180px

Light Angle 145°

Background Color

Soft UI Box

Generated CSS

background: #e0e5ec;
box-shadow: 20px 20px 60px #bebebe, 
             -20px -20px 60px #ffffff;
border-radius: 30px;

About Neumorphism Generator

The Neumorphism Generator lets you design soft UI elements that combine background colors, shapes, gradients, and contrasting box shadows to create an extruded plastic or clay-like look.

Key Features

Multiple Shadow Styles: Switch easily between flat elements, pressed-in buttons, and concave shapes.
Customizable Lighting & Angles: Control light position, blur radii, distances, and shadow intensity sliders in real-time.
Instant CSS Export: Copy production-ready CSS snippets instantly into your web projects.