CSS Box Shadow Generator

The CSS box-shadow property adds one or more shadow effects to an element. Each shadow is described by its horizontal offset (offset-x), vertical offset (offset-y), blur radius, spread radius, color, and an optional inset keyword. Multiple shadows are separated by commas and rendered front-to-back, meaning the first shadow is on top.

You can add multiple box-shadow values separated by commas. For example: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1). Each value creates an independent shadow layer. This generator lets you add, remove, and reorder layers visually.

Blur radius controls how blurred (soft) the shadow is -- higher values create a more diffused shadow. Spread radius controls the size of the shadow -- positive values make the shadow larger than the element, negative values shrink it. A spread of 0 means the shadow is the same size as the element before blurring.

An inset box-shadow renders the shadow inside the element instead of outside. It creates a pressed or recessed appearance. You enable it by adding the "inset" keyword before the offset values. Inset shadows are commonly used for input fields, neumorphism designs, and inner glow effects.

Yes. Tailwind provides utility classes like shadow-sm, shadow-md, shadow-lg, and shadow-xl. For custom shadows, use the arbitrary value syntax: shadow-[0_4px_6px_rgba(0,0,0,0.1)]. This generator outputs both standard CSS and Tailwind-compatible class strings you can copy directly into your code.