CSS Box Shadow Generator

Yes! CSS supports multiple comma-separated box-shadow values. Generate your first shadow here, copy it, then adjust the controls for additional layers. Combine them like: box-shadow: 5px 5px 15px rgba(0,0,0,0.3), 0 0 0 5px rgba(0,0,255,0.1);

Blur radius softens the shadow edge - larger values create a more diffuse, softer shadow. Spread radius expands or contracts the shadow size. Positive spread makes the shadow bigger (glow effect); negative spread makes it smaller than the element.

Offset-x moves the shadow horizontally (positive = right, negative = left). Offset-y moves the shadow vertically (positive = down, negative = up). Setting both to 0 with a blur radius creates an even glow around all sides of the element.

Blur radius softens the shadow edge. A value of 0 gives a hard shadow edge. Larger values create softer, more diffuse shadows. The blur extends equally in all directions from the shadow's position. Very large blur values (50px+) create ambient, atmospheric shadows.

Spread radius grows or shrinks the shadow in all directions before blur is applied. Positive values make the shadow larger (like a larger element behind yours). Negative values shrink the shadow. It's especially useful for creating multiple layered shadow effects.

Layer multiple box-shadows with increasing blur and decreasing opacity: a tight shadow (1-2px blur) for surface contact, a medium shadow (4-8px blur) for elevation, and a large shadow (16-32px blur) for ambient occlusion. Study real-world lighting and material design principles.

An inset shadow renders inside the element instead of outside, creating a recessed or pressed effect. It's great for form inputs, pressed buttons, or giving depth to containers. Toggle the inset checkbox to preview it.