CSS Box Shadow Generator

A CSS box shadow adds a shadow effect around an element's frame. It is defined using the box-shadow property with values for horizontal offset, vertical offset, blur radius, spread radius, and color. Box shadows can make elements appear elevated or add depth to a design.

Separate multiple shadow values with commas. For example: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1); — this creates a subtle layered shadow that looks more realistic than a single shadow. This tool lets you add and configure multiple layers visually.

An inset box shadow appears inside the element instead of outside. Add the 'inset' keyword before the shadow values: box-shadow: inset 0 2px 4px rgba(0,0,0,0.2). Inset shadows are often used to create pressed or recessed effects on buttons and input fields.

The spread radius is the fourth numeric value in box-shadow. A positive value expands the shadow larger than the element, while a negative value shrinks it. For example, box-shadow: 0 4px 8px -2px rgba(0,0,0,0.2) uses a negative spread to make the shadow slightly smaller than the element.

Box shadows can impact rendering performance, especially with large blur values or when applied to many elements. For best performance, avoid very large blur radii (over 50px) and limit the number of shadowed elements in scrollable areas. Using will-change: transform can help the browser optimize rendering.