What is Neumorphism?
Neumorphism (or soft UI) is a UI design trend that combines skeuomorphic depth with flat design simplicity. Elements appear to extrude from — or press into — the background using two carefully placed box-shadows: one lighter and one darker than the background color.
🪞 Soft Depth Effect
Neumorphic elements look like they're physically part of the surface — raised buttons, pressed inputs, and floating cards.
🎨 Color-Matched Shadows
Both shadows are derived from the background color — one lightened, one darkened — keeping the design cohesive.
📋 Pure CSS
No images or SVG required — neumorphic effects are created entirely with CSS box-shadow.
Neumorphism CSS Examples
The key is using two box-shadow values — a light shadow and a dark shadow.
Raised Element (default)
background: #e0e5ec; border-radius: 12px; box-shadow: 8px 8px 16px #b8bec7, -8px -8px 16px #ffffff;Pressed / Active State
background: #e0e5ec; border-radius: 12px; box-shadow: inset 8px 8px 16px #b8bec7, inset -8px -8px 16px #ffffff;Concave Style
background: linear-gradient( 145deg, #cacdd4, #f0f3fa ); box-shadow: 8px 8px 16px #b8bec7, -8px -8px 16px #ffffff;Dark Mode Neumorphism
background: #2d2d2d; border-radius: 12px; box-shadow: 8px 8px 16px #1a1a1a, -8px -8px 16px #404040;Neumorphism Shadow Generator — Figma Plugin
The Neumorphism Shadow Generator Figma Plugin by Plus UI Design lets you create neumorphic effects directly in Figma without writing any CSS manually.
⚡ Key Features
- Customizable light source direction
- Shadow intensity and softness control
- Gradient or solid background support
- Flat, concave, convex, and pressed styles
- Corner radius control
- Real-time preview in Figma
- One-click CSS code copy
🔄 How It Works
- Install the plugin from Figma Community
- Select a frame or rectangle in Figma
- Adjust shadow settings in the plugin panel
- Click to apply — shadows update in real time
- Copy the generated CSS for your web project
