Neumorphism Generator
Create soft UI neumorphic shadows with a live preview.
Options
Preview
Light: rgb(255, 255, 255) · Dark: rgb(186, 186, 186)
Generated CSS
About the Neumorphism Generator
Design neumorphic (soft UI) elements by tuning background color, shadow distance, blur, intensity, and corner radius, with an inset toggle for pressed states. Preview live and copy the generated CSS.
Examples
Soft raised button
distance 8, blur 16Output
box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;Keyboard shortcuts
- Copy the main outputCtrl / ⌘ + Shift + C
- Download the resultCtrl / ⌘ + S
- Share this toolCtrl / ⌘ + Shift + S
- Reset the inputsAlt + R
- Open the tool search paletteCtrl / ⌘ + K
Related tools
Border Radius Generator
HTML & CSS
Fine-tune per-corner border radii visually.
Box Shadow Generator
HTML & CSS
Layer multiple box-shadows with a live preview.
Clip Path Generator
HTML & CSS
Design polygon clip-path shapes with a live preview.
CSS Animation Generator
HTML & CSS
Build keyframe animations visually with a live preview.
CSS Filter Playground
HTML & CSS
Tune blur, brightness, contrast, and more with a live preview.
CSS Gradient Generator
HTML & CSS
Design linear, radial, and conic gradients visually.
Frequently asked questions
Comments
No login needed. Comments appear after a quick review.
Loading comments…
Version 1.0.0 · Updated 2026-08-07 · Runs entirely in your browser