Design a CSS box-shadow with live sliders and copy the code.
Generated locally in your browser.
How do you generate a CSS box-shadow?
The output uses box-shadow: [inset] offset-x offset-y blur spread color, with the colour converted to rgba() so opacity applies. Offset moves the shadow, blur softens its edge, spread grows or shrinks it, and inset draws the shadow inside the element. For example, a 0px 12px 24px shadow in dark slate at 25% opacity gives a soft, modern card elevation. Adjust sliders and copy the code.
Understanding your result
Offset moves the shadow, blur softens its edge, spread grows or shrinks it, and inset draws the shadow inside the element instead of behind it.
Formula and method
The output uses box-shadow: [inset] offset-x offset-y blur spread color, with the colour converted to rgba() so the opacity applies.
Worked example
A 0px 12px 24px shadow in dark slate at 25% opacity gives a soft, modern card elevation.
How to use this tool
- Choose an outer or inset shadow.
- Set the horizontal and vertical offset, blur and spread.
- Pick the colour and opacity, then copy the generated CSS.
Common mistakes to avoid
- Using full opacity, which makes shadows look harsh rather than natural.
- Adding a large spread with no blur, which creates a hard outline.
About the CSS Box Shadow Generator
Build a CSS box-shadow visually and copy the ready-to-use code. Drag the sliders for offset, blur, spread and opacity and watch the live preview update instantly.
Who should use this tool
Front-end developers and designers who want a polished shadow without hand-tuning values in code.
Explore all Developer Tools tools
Frequently asked questions
Can I stack multiple shadows?
Yes — separate each shadow with a comma in the box-shadow property. This tool builds one shadow at a time that you can combine.
What is an inset shadow?
An inset shadow is drawn inside the element, which is useful for pressed buttons or inner depth.