Background
#e0e0e0
Output
box-shadow: 9px 9px ...
Design Tools
CSS Neumorphism — Soft UI Shadow Generator
Generate neumorphic inset/outset shadow CSS from background color, distance, and blur. Preview raised and pressed looks for buttons, cards, and light soft-UI controls.
CSSNeumorphismShadow
Favorite this tool
No favorite storage mode has been selected.
Quick actions
Copy this tool URL or open the system share sheet on a supported device.
设计配色
CSS Neumorphism
Generate neumorphic inset/outset shadow CSS from background color, distance, and blur. Preview raised and pressed looks for buttons, cards, and light soft-UI controls.
生成 CSS 代码
调整颜色、距离、模糊、圆角或形态后，预览和复制 CSS 会保持一致。
Use cases
- Tune soft button shadows
- Add light card depth
- Compare raised vs pressed controls
How to use
- Choose a background color
- Adjust distance and blur
- Preview and copy the CSS
Example input and output
FAQ
Does it work well on dark backgrounds?
It works best on light backgrounds. Dark UIs usually need separate highlight and shadow colors.
How does it differ from the box-shadow generator?
This tool outputs the dual-shadow combo typical of neumorphism. The general tool is better for arbitrary offsets, spreads, and layered shadows.
Tools
Related tools
Continue with another translated tool for a nearby task.
CSS Box Shadow Generator
CSS Box Shadow Generator — Visual Controls
Visually adjust offset, blur, spread, color, opacity, and inset. Preview live and generate box-shadow CSS for cards, buttons, and overlays.
CSS Shadow box-shadow
CSS Glassmorphism
CSS Glassmorphism — Frosted Card Style Generator
Tune color, opacity, blur, and outline to preview and generate frosted-glass card CSS with backdrop-filter. Useful for translucent panels and nav layers; everything runs in the browser.
CSS Glassmorphism backdrop-filter