CSS Box Shadow Generator

The CSS box-shadow property adds shadow effects around an element's frame. It accepts one or more shadow layers, each defined by: horizontal offset (X), vertical offset (Y), blur radius, spread radius, color, and an optional 'inset' keyword. Multiple shadows create layered effects and can be combined for depth and glow effects.

The blur radius determines how blurry the shadow edge is. A value of 0 creates a sharp, hard shadow with crisp edges. Higher values create softer, more diffuse shadows that fade out gradually. Unlike other CSS blur functions, the shadow blur cannot be negative.

The spread radius expands or contracts the shadow before blurring. A positive value makes the shadow larger than the element; a negative value makes it smaller. For example, a shadow with blur: 0 and spread: 4px creates a solid outline effect around the element.

Adding the 'inset' keyword flips the shadow inside the element instead of outside. Inset shadows appear as if light is hitting from the opposite side, creating a sunken, pressed, or inner-glow effect. Inset shadows are commonly used for inputs, wells, and neumorphic UI designs.

Add multiple shadow layers using the 'Add layer' button. Each layer is rendered in order, allowing you to combine a close tight shadow for definition with a far soft shadow for depth. The classic technique uses 3 layers: a small tight shadow, a medium soft shadow, and a large diffuse shadow.

rgba() with an alpha value creates semi-transparent shadows that blend naturally with any background color. A pure black shadow (#000000) at 15% opacity looks neutral on any background, while a fully opaque black shadow looks harsh and artificial. Always use rgba for realistic-looking shadows.