Generate CSS Box Shadow Code
Adjust blur, spread, offset, and color with sliders and see your box shadow update in real time. Copy the CSS when you're satisfied.
Takes the trial-and-error out of shadow design. Preview multiple shadow layers, tweak inset shadows, and get the exact CSS you need without guessing at pixel values.
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);Frequently Asked Questions — CSS Box Shadow Generator
Yes. Stack multiple shadow layers for complex effects. Each layer has its own offset, blur, spread, and color.
Yes. The preview updates instantly as you adjust the sliders. What you see is what you get.
Yes. Copy the box-shadow property value directly into your stylesheet.
More Design & Color
Color Picker
Pick colors and convert between HEX, RGB, HSL, and HSB.
Image Color Picker
Pick colors from any image — get HEX, RGB, and HSL values.
Color Palette Extractor
Extract dominant colors from any image using k-means clustering.
Color Palette Generator
Generate harmonious color palettes from a base color.
CSS Gradient Generator
Create beautiful CSS gradients with a visual editor.