CSS Box Shadow Generator

What is the CSS box-shadow Property?

The CSS box-shadow property adds one or more shadow effects to an element's bounding box. Unlike a real shadow cast by light, a box shadow is drawn as a copy of the element's rectangular border box, offset in any direction, blurred, and colored. It is one of the most widely used visual effects in modern web design, used for everything from subtle card depth to dramatic glow effects.

Box shadows were introduced in CSS3 and are now supported by every modern browser without any vendor prefix. You can apply them to any block-level or inline-block element, including div, button, input, and img.

Understanding the Syntax

The full syntax for a single box-shadow layer is:

• offset-x — How far to push the shadow horizontally. Positive values move it right, negative values move it left.
• offset-y — How far to push the shadow vertically. Positive pushes it down, negative pushes it up.
• blur-radius — Optional. Controls how blurry the shadow edges are. Zero gives a hard edge. Larger values create softer, more diffused shadows.
• spread-radius — Optional. Expands or shrinks the shadow. Positive values make it larger than the element, negative values shrink it. Useful for tricks like creating an outline effect.
• color — The shadow color. Using rgba() lets you control opacity without a separate property.
• inset — Optional keyword that flips the shadow inside the element, creating an inner shadow effect.

Layering Multiple Shadows

One of the most powerful features of box-shadow is that you can stack as many layers as you need, separated by commas. Professional designs rarely use a single flat shadow. Instead, they combine two or three layers at different distances and opacities to mimic how real light behaves — close light creates a sharper, darker shadow while ambient light creates a wider, lighter one.

The first layer handles the tight, immediate shadow close to the surface. The second layer provides the broader ambient shadow that gives the element its sense of elevation. This two-layer technique is the foundation of Google's Material Design elevation system and most modern design systems.

Inset Shadows for Depth and Pressed States

Adding the inset keyword draws the shadow on the inside of the element. This creates the impression that the element is recessed into the page rather than elevated above it. Inset shadows are commonly used for:

• Input fields to indicate a sunken, editable area
• Button "pressed" states when combined with :active selector
• Well components that show content sitting below the page surface
• Neumorphic UI elements that combine both outer and inner shadows

Performance Considerations

Box shadows are painted by the browser's compositor on a separate layer. This means they are generally performant and do not trigger layout recalculations. However, there are a few things to keep in mind:

• Avoid animating blur-radius. Changing the blur-radius during an animation forces the browser to repaint the shadow every frame, which is expensive on mobile. Animate opacity instead.
• Limit layers. Five or more shadow layers on dozens of elements can add up. Profile your page if you notice performance issues.
• Use spread-radius for outlines. A box shadow with zero offset and zero blur but a positive spread is a performant alternative to outline, and it respects border-radius.