What do offset, blur, and spread mean in a CSS box-shadow?

Offset X/Y move the shadow horizontally and vertically — positive values push the shadow right and down. Blur softens the shadow edge; 0 produces a hard edge, larger values feather it. Spread expands (positive) or contracts (negative) the shadow size before the blur is applied. Together they describe the full geometry: `box-shadow: `.

What is the difference between inset and outset (default) shadows?

An outset shadow (the default) renders outside the element's border, suggesting the element is lifted off the page. An inset shadow renders inside the border, suggesting the element is pressed into the surface. Add the `inset` keyword before the offsets to switch — both styles can be combined in a single declaration with multiple comma-separated layers.

How do I stack multiple shadows on one element?

CSS lets you pass several shadows to a single `box-shadow` rule, separated by commas — for example `box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05)`. The first listed shadow renders on top, the rest layer underneath. Material Design elevations (1dp, 4dp, 8dp, 16dp) are all multi-layer shadows tuned for soft realistic depth — try the presets in this tool to see them in action.

How do Material Design elevation shadows work?

Material Design uses three stacked shadows per elevation level — a subtle umbra near the element, a wider penumbra, and an even softer ambient layer. Higher elevation (1dp → 24dp) increases offset, blur, and opacity to suggest the element is further off the surface. The presets in this tool ship the 1dp, 4dp, 8dp, and 16dp values directly from the Material Design spec.

Do box shadows hurt rendering performance?

Box shadows are GPU-accelerated in modern browsers and inexpensive for static elements. Performance issues typically appear only with extreme blur (>100px), very large spread, or shadows on elements that animate position or size — promoting the element to its own layer with `will-change: transform` or animating `transform` instead of `top/left` keeps things smooth. For a strong glow effect, prefer two stacked shadows with smaller blur over one massive blur.

How do I match my shadow color to a brand palette?

For a tinted shadow that still reads as depth, set a low opacity (10–25%) on a dark variant of your brand color rather than pure black. For example, a deep navy at 0.15 alpha layered with a soft sky blue at 0.08 looks more polished than `rgba(0,0,0,0.2)`. Use the [Hex Color Picker](/hex-color-picker) to fine-tune the base color and the [Color Converter](/color-converter) to convert it into the rgba this tool emits.

Box Shadow Generator — CSS Multi-Layer Shadows

CSS Box Shadow Generator

Build multi-layer CSS box shadows with live preview, Material elevation presets, and one-click copy

Processed locally in your browser

Shadow Layers (1/5)

Shadow 1

Inset

Offset Xpx

Offset Ypx

Blurpx

Spreadpx

Color#00000018%

CSS Code

Include box-shadow: prefix

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.18);

Presets

Preview

Unlock the full toolkit

Batch processing, no ads, higher limits, and API access.

Go Premium

How to Use

1. Pick a preset for a quick start, or build from scratch with the default shadow. 2. Adjust X/Y offset, blur, and spread with sliders or numeric inputs. 3. Toggle Inset for an inner shadow. 4. Pick a color and dial in opacity for the rgba alpha channel. 5. Click "Add shadow" to stack up to five layers — order matters, the first layer renders on top. 6. Switch the preview shape (square/rounded/circle) and background (light/dark) to verify the look. 7. Copy the generated CSS. Pair with the CSS Gradient Generator for richer card backgrounds.

Features

✓Stack up to 5 shadow layers in one rule
✓Inset / outset toggle per layer
✓Sliders + numeric inputs for X, Y, blur, spread
✓Hex color picker with opacity slider (0–100%)
✓Live preview on three shapes — square, rounded, circle
✓Toggle preview background between light, dark, and custom
✓9 curated presets: Subtle, Material 1/4/8/16dp, Glow, Neumorphism, Inset Soft, Long Shadow
✓Copy CSS as value or full `box-shadow:` declaration
✓Fully client-side — no signup, no upload, runs in your browser

Frequently Asked Questions

What do offset, blur, and spread mean in a CSS box-shadow?: Offset X/Y move the shadow horizontally and vertically — positive values push the shadow right and down. Blur softens the shadow edge; 0 produces a hard edge, larger values feather it. Spread expands (positive) or contracts (negative) the shadow size before the blur is applied. Together they describe the full geometry: `box-shadow: <offsetX> <offsetY> <blur> <spread> <color>`.
What is the difference between inset and outset (default) shadows?: An outset shadow (the default) renders outside the element's border, suggesting the element is lifted off the page. An inset shadow renders inside the border, suggesting the element is pressed into the surface. Add the `inset` keyword before the offsets to switch — both styles can be combined in a single declaration with multiple comma-separated layers.
How do I stack multiple shadows on one element?: CSS lets you pass several shadows to a single `box-shadow` rule, separated by commas — for example `box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05)`. The first listed shadow renders on top, the rest layer underneath. Material Design elevations (1dp, 4dp, 8dp, 16dp) are all multi-layer shadows tuned for soft realistic depth — try the presets in this tool to see them in action.
How do Material Design elevation shadows work?: Material Design uses three stacked shadows per elevation level — a subtle umbra near the element, a wider penumbra, and an even softer ambient layer. Higher elevation (1dp → 24dp) increases offset, blur, and opacity to suggest the element is further off the surface. The presets in this tool ship the 1dp, 4dp, 8dp, and 16dp values directly from the Material Design spec.
Do box shadows hurt rendering performance?: Box shadows are GPU-accelerated in modern browsers and inexpensive for static elements. Performance issues typically appear only with extreme blur (>100px), very large spread, or shadows on elements that animate position or size — promoting the element to its own layer with `will-change: transform` or animating `transform` instead of `top/left` keeps things smooth. For a strong glow effect, prefer two stacked shadows with smaller blur over one massive blur.
How do I match my shadow color to a brand palette?: For a tinted shadow that still reads as depth, set a low opacity (10–25%) on a dark variant of your brand color rather than pure black. For example, a deep navy at 0.15 alpha layered with a soft sky blue at 0.08 looks more polished than `rgba(0,0,0,0.2)`. Use the Hex Color Picker to fine-tune the base color and the Color Converter to convert it into the rgba this tool emits.