CSS Box Shadow Generator

Generate CSS box-shadow with visual controls. Adjust offset, blur, spread, color, and inset with live preview.

Controls
Preview
Preview
CSS Code
/* Select controls above */

Frequently Asked Questions

What is box-shadow?

The CSS box-shadow property adds shadow effects around an element's frame. You can control position, blur, spread, and color.

What does spread do?

Spread expands or contracts the shadow. Positive values make the shadow larger, negative values make it smaller than the element.

What is an inset shadow?

An inset shadow appears inside the element's border, creating an inner shadow or pressed effect.