Parameters
X: 0, Y: 4, Blur: 6, Spread: -1, rgba(0,0,0,0.1)
CSS
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
Design Tools
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.
CSSShadowbox-shadow
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 Box Shadow Generator
水平偏移 (X) 0px
垂直偏移 (Y) 10px
模糊半径 (Blur) 20px
扩散程度 (Spread) -5px
透明度 10%
预览
Use cases
- Add an outer shadow to a button or card
- Debug overlay and hard-edge outline shadows
- Enable inset for recessed control styles
How to use
- Use the sliders for X/Y offset, blur, and spread
- Set shadow color and opacity; enable inset if needed
- Preview, then copy the generated CSS
Example input and output
FAQ
Does it support inset shadows?
Yes. Enable Inset to generate box-shadow with the inset keyword and update the preview live.
Can I build layered shadows?
The UI generates one layer at a time. For multiple layers, adjust more than once and join the box-shadow values with commas.
Tools
Related tools
Continue with another translated tool for a nearby task.
CSS Gradient Generator
CSS Gradient Generator — Linear, Radial, Conic
Visually build linear, radial, and conic CSS gradients. Adjust angle and stop positions, add multiple stops, and copy CSS for backgrounds, buttons, and brand transitions.
CSS Gradient Background
Color Converter
Color Converter — HEX, RGB, HSL Online
Convert colors among HEX, RGB, HSL, HWB, CMYK, and CSS variables in your browser. Includes a color picker and random color helper for design handoff, stylesheet work, and brand-color alignment.
Color HEX RGB
Glassmorphism Generator
Glassmorphism Generator — backdrop-filter CSS
Visually tune blur, opacity, background color, and border opacity to generate frosted-glass CSS with a -webkit prefix. Useful for cards, nav bars, and modal layers.
CSS Glassmorphism backdrop-filter