CSS Box Shadow: Complete Guide with Free Generator Tool

The CSS box-shadowproperty is one of the most powerful tools in a front-end developer's arsenal. Used well, shadows add depth, hierarchy, and a sense of elevation to UI components. This guide explains the complete syntax and shows you how to generate beautiful shadows without the trial-and-error.

The CSS box-shadow Syntax Explained

The box-shadow property accepts up to six values:

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;

Here is what each value does:

• offset-x — Horizontal offset. Positive values move the shadow to the right; negative values move it to the left.
• offset-y — Vertical offset. Positive values move the shadow downward; negative values move it upward.
• blur-radius — The higher the value, the more blurred and spread out the shadow. A value of 0 creates a sharp, hard shadow.
• spread-radius— Positive values expand the shadow beyond the element's size; negative values shrink it. Defaults to 0.
• color — The shadow color. Use rgba() to control opacity. A semi-transparent color looks more natural than a solid one.
• inset (optional) — Makes the shadow appear inside the element rather than outside.

Popular Shadow Presets with Code Examples

Soft Elevation (Card Shadow)

Perfect for cards, modals, and panels. A large blur with a very low opacity gives a realistic, airy feeling.

box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);

Subtle Lift (Button Hover)

A small shadow that appears on hover to give the impression of a button lifting off the surface.

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);

Strong Drop Shadow

For modals, dropdowns, and popovers that need to appear clearly above other content.

box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);

Inset Shadow (Pressed Button)

Creates a depressed or "pressed in" effect. Great for active/clicked button states.

box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15);

Multiple Shadows

CSS allows you to stack multiple shadows on a single element by separating them with commas. This technique is used to create more realistic, layered light effects:

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.07),
  0 4px 8px rgba(0, 0, 0, 0.05),
  0 12px 24px rgba(0, 0, 0, 0.03);

This three-layer shadow mimics how light naturally diffuses — a sharp, dense shadow close to the element, then softer layers extending further out. This is the technique used by Stripe, Linear, and other design-forward products.

Performance Tips

Box shadows are rendered by the browser's compositor and are GPU-accelerated, which means they are generally very performant. However, a few things to keep in mind:

• Animating box-shadow on hover triggers a repaint on every frame. For smoother animations, use filter: drop-shadow() and transform instead, which run on the compositor thread.
• Very large blur radii on large elements can be expensive. Use them sparingly on elements that appear frequently on a page.
• Avoid animating shadows on low-powered devices. Use @media (prefers-reduced-motion) to disable shadow animations for users who prefer less motion.

Real-World Examples

• Cards: Use soft shadows (large blur, low opacity) to lift cards above the page background.
• Buttons: A subtle shadow on the default state and a slightly deeper shadow on hover creates a satisfying interactive feel.
• Modals and overlays: Use a strong, large shadow to clearly separate the modal from the dimmed background.
• Navigation bars: A thin bottom shadow (1–2px offset-y, small blur) separates the nav from the page content without being heavy-handed.
• Input focus: Use a spread shadow with a semi-transparent brand color to indicate focused form fields.