Frontend / CSS Tools

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.

Offset X: 10px

Offset Y: 10px

Blur: 20px

Spread: 0px

Color

Opacity: 25%

Inset (inner shadow)

More Frontend / CSS Tools

View all 20

CSS Gradient Generator CSS Border Radius Generator CSS Specificity Calculator CSS Button Generator PX to EM Converter CSS Flexbox Generator REM to PX Converter CSS Grid Generator

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.