CSS Box Shadow Generator
Build a CSS box-shadow visually - offset, blur, spread, color, and inset - with a live preview.
Adjust offset, blur, spread, and color - the preview box updates live and the CSS is ready to copy.
For a shadow on text specifically rather than a box, see the CSS Text Shadow Generator.
What Does box-shadow Control?
The box-shadow property adds a drop shadow (or, with inset, an inner shadow) around an element's box, controlled by horizontal/vertical offset, blur radius, spread radius, and color.
Why Use This Tool?
Getting a shadow to look subtle rather than harsh usually takes several rounds of adjusting blur and opacity together - a live preview makes that far faster than editing CSS and refreshing repeatedly.
How to Use It
- Adjust horizontal offset, vertical offset, blur, and spread with the sliders.
- Pick a color and opacity.
- Toggle inset for an inner shadow instead of a drop shadow.
- Copy the generated CSS.
Limitations
This generates a single shadow layer - CSS does support comma-separated multiple shadows on one element, which you can combine manually by generating each layer here separately.