🟦
CSS Box-Shadow Generator
Design box-shadows with a live preview.
Loading tool…
How to use the CSS Box-Shadow Generator
- 1Drag the sliders for offset, blur, spread and opacity.
- 2Pick a shadow color (and inset if you want).
- 3Copy the box-shadow CSS.
About the CSS Box-Shadow Generator
Free CSS box-shadow generator — adjust offset, blur, spread, color and opacity with a live preview, then copy the box-shadow CSS.
Part of our Color Tools collection. Browse all tools.
More Color Tools
→
🎨
Color Converter
Convert colors between HEX, RGB and HSL.
→🌈
CSS Gradient Generator
Create CSS gradients and copy the code.
→🌗
Color Contrast Checker
Check WCAG color contrast between two colors.
→🎨
Color Palette Generator
Generate shades, tints and matching colors.
→🖌️
Color Picker from Image
Pick any color from an uploaded image.