CSS Box Shadow Generator

Understanding CSS box-shadow

The CSS box-shadow property adds shadow effects around an element’s frame. Introduced in CSS3, it is one of the most commonly used properties for adding depth, elevation, and visual hierarchy to web interfaces. Box shadows are supported by all modern browsers and have been stable since Internet Explorer 9.

The box-shadow property accepts one or more shadow values, each defined by up to six components: optional inset keyword, horizontal offset, vertical offset, blur radius, spread radius, and color. Understanding how each component works gives you complete control over the visual effect.

box-shadow Syntax Breakdown

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

/* Example */
box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.25);

inset (optional) — When present, the shadow is drawn inside the element’s border box instead of outside. This creates a pressed or recessed appearance.
offset-x — The horizontal distance of the shadow from the element. Positive values move the shadow to the right; negative values move it to the left.
offset-y — The vertical distance of the shadow from the element. Positive values move the shadow downward; negative values move it upward.
blur-radius (optional, default 0) — The amount of Gaussian blur applied to the shadow. Higher values create softer, more diffused shadows. A value of 0 produces a sharp, crisp shadow edge.
spread-radius (optional, default 0) — Expands or shrinks the shadow. Positive values make the shadow larger than the element; negative values make it smaller. A spread of 0 means the shadow is the same size as the element.
color — The color of the shadow, typically specified as rgba() to include transparency. Using semi-transparent black or dark grey produces the most natural-looking shadows.

Multiple Box Shadows

A single element can have multiple shadows, separated by commas. This is a powerful technique for creating complex, layered shadow effects:

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.07),
  0 2px 4px rgba(0, 0, 0, 0.07),
  0 4px 8px rgba(0, 0, 0, 0.07),
  0 8px 16px rgba(0, 0, 0, 0.07);

This layered approach, popularized by design systems like Material Design and Tailwind CSS, produces more realistic shadows than a single large shadow. Each layer adds a progressively wider and softer shadow, mimicking how light behaves in the real world where shadows have both a sharp umbra and a soft penumbra.

This tool supports adding multiple shadows. Click the “+ Add Shadow” button to create additional layers, and adjust each one independently with its own offset, blur, spread, color, and opacity controls.

Inset Shadows

The inset keyword flips the shadow to the inside of the element. Inset shadows are commonly used for:

Input fields — A subtle inset shadow gives text inputs a recessed appearance, signaling that they are interactive and accept user input.
Pressed button states — Toggling from an outer shadow to an inset shadow on :active creates a convincing button press effect.
Inner glow — Using a light color with inset and high blur creates an inner glow effect, useful for highlighting or focus indicators.
Neumorphism — The neumorphic design trend combines outer and inset shadows on the same element to create a soft, embossed appearance.

Box Shadow Design Patterns

Here are battle-tested shadow patterns used across modern web design:

Elevation Levels (Material Design)

Material Design defines five elevation levels, each with progressively more prominent shadows. The higher the elevation, the more “lifted” the element appears. Cards typically use elevation 1-2, dialogs use 3-4, and navigation bars use 4-5.

Tailwind CSS Shadow Scale

Tailwind CSS provides a shadow utility scale from shadow-sm to shadow-2xl. Each level uses multiple layered shadows for a natural appearance. The most commonly used values are shadow-md (for cards) and shadow-lg (for dropdowns and modals).

Colored Shadows

Instead of black or grey, you can use the element’s own color (at reduced opacity) as the shadow color. This creates a vibrant glow effect that makes colored buttons and cards pop. For example, a blue button might use box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4).

Performance Considerations

Box shadows are rendered by the browser’s GPU-accelerated compositor, but there are performance nuances to be aware of:

Blur radius cost — Larger blur radii require more computation. A blur of 100px is significantly more expensive than 10px. Keep blur values reasonable (under 50px for most use cases).
Animating shadows — Animating box-shadow directly (e.g., on hover) triggers a repaint on every frame. For smoother performance, animate opacity on a pseudo-element instead: create a ::after pseudo-element with the target shadow and animate its opacity from 0 to 1.
Number of shadows — Each additional shadow layer adds rendering cost. Two or three layers are fine; ten layers on hundreds of elements may cause jank on low-end devices.
will-change hint — If you animate shadow properties, adding will-change: box-shadow can help the browser optimize rendering by promoting the element to its own compositing layer.

box-shadow vs. drop-shadow Filter

CSS offers two ways to add shadows: box-shadow and filter: drop-shadow(). They differ in key ways:

Shape — box-shadow always follows the rectangular border box (including border-radius). drop-shadow follows the alpha channel of the element, including transparent PNG images and SVGs with complex shapes.
Spread — box-shadow supports a spread radius; drop-shadow does not.
Inset — Only box-shadow supports the inset keyword.
Multiple values — box-shadow accepts comma-separated multiple shadows; drop-shadow requires chaining multiple filter functions.

Use box-shadow for rectangular UI elements (cards, buttons, dialogs) and drop-shadow for images and SVGs with transparent backgrounds.

How This Tool Works

This CSS box shadow generator runs entirely in your browser. No data is sent to any server. Here is what happens:

You adjust shadow parameters using sliders and inputs. Each shadow has controls for horizontal offset, vertical offset, blur radius, spread radius, color, opacity, and an inset toggle.
On every change, the tool computes the box-shadow CSS value from the current parameters and applies it to the preview box.
Multiple shadows are combined into a comma-separated value. The generated CSS includes the standard property and the -webkit- prefixed version for older browser compatibility.
You can copy the CSS with one click and paste it directly into your stylesheet.

Frequently Asked Questions

Is this tool free to use?

Yes, completely free with no limits. The shadow is generated and previewed in your browser — no server processing, no account required.

Can I add multiple shadows?

Yes. Click “+ Add Shadow” to create additional shadow layers. Each layer has independent controls. Multiple shadows are combined into a single comma-separated box-shadow value.

What is the inset option?

The inset toggle adds the inset keyword to the shadow, which draws it inside the element instead of outside. This creates a pressed or recessed visual effect.

Do I need the -webkit- prefix?

The -webkit-box-shadow prefix is only needed for very old browsers (Safari 3-4, Chrome 1-9). All modern browsers support the unprefixed box-shadow property. The tool includes both versions so you can choose based on your browser support requirements.

Can I change the preview background and box colors?

Yes. Use the “Background Color” and “Box Color” pickers below the shadow controls to customize the preview area. This helps you see how your shadow looks against your actual design colors.