What is the CSS box-shadow property?

The CSS box-shadow property adds one or more shadow effects around an element's frame. Each shadow is described by offset values (X and Y), an optional blur radius, an optional spread radius, and a color. Multiple shadows are separated by commas, with the first shadow being on top.

What do the offset, blur and spread values mean?

Horizontal offset (X) moves the shadow right (positive) or left (negative). Vertical offset (Y) moves it down (positive) or up (negative). Blur radius softens the shadow edge — 0 is sharp, higher values are more diffuse. Spread radius expands or shrinks the shadow size — positive values grow it, negative values shrink it.

What is an inset shadow?

Adding the inset keyword reverses the shadow direction, making it appear inside the element frame rather than outside. Inset shadows are commonly used to create pressed or embossed button effects, depth in input fields, and inner glow effects.

How do I add multiple shadows to one element?

Separate multiple shadow values with commas: `box-shadow: 2px 2px 4px rgba(0,0,0,0.3), -2px -2px 4px rgba(255,255,255,0.5);`. Shadows are layered from front to back in the order they are listed. This technique is fundamental to neumorphism UI design.

Can box-shadow affect layout or cause reflow?

No, box-shadow does not affect layout or trigger reflow. It is purely visual and rendered outside the normal flow. Unlike outline, it also does not affect the element's clickable area. Box-shadow is GPU-composited in most browsers, making it very performant for animations.

How do I use box-shadow for card elevation in design systems?

Material Design and similar systems define elevation levels via increasing box-shadow values. A subtle shadow (e.g. `0 1px 3px rgba(0,0,0,0.12)`) suggests low elevation for cards at rest. A stronger shadow (e.g. `0 8px 24px rgba(0,0,0,0.25)`) suggests high elevation for modals and overlays.

Is box-shadow supported in all browsers?

box-shadow is supported in all modern browsers and has been since IE9. No vendor prefixes are needed. The spread radius is universally supported. The inset keyword is also fully supported across all major browsers.

Box Shadow
Generator

Design perfect CSS box shadows with live preview. Adjust offset, blur, spread and color — stack multiple layers for depth.

Offset · Blur · SpreadMulti-layer shadowsCSS-ready

① Adjust X, Y, blur, spread ② Layer up to 3 shadows ③ Copy the CSS

Presets:

Layer 1

Horizontal offset: 5px

Vertical offset: 10px

Blur radius: 20px

Spread radius: 0px

Shadow color

#000000

Opacity: 0.25

Inset shadow

Generated CSS

box-shadow: 5px 10px 20px 0px rgba(0, 0, 0, 0.25);

Offset

X and Y offsets control the shadow direction. Positive X pushes right, negative left. Positive Y pushes down, negative up.

Blur & Spread

Blur radius softens the shadow edges (0 = sharp). Spread expands or contracts the shadow beyond the element bounds.

Inset

Inset shadows appear inside the element, creating a pressed or recessed effect instead of an outer drop shadow.

CSS box-shadow — how it works and when to use it

The CSS box-shadow property adds shadow effects around an element's frame. It accepts horizontal offset (X), vertical offset (Y), blur radius, spread radius and color. Use rgba() with partial opacity (typically 0.1–0.25) for soft, realistic shadows. The inset keyword places the shadow inside the element, creating pressed button effects and depth in form fields. Stack multiple shadows with comma-separated values to achieve Material Design elevation levels or neumorphism effects. box-shadow does not affect layout and is GPU-composited for smooth animations — unlike filter: drop-shadow(), which follows the element's alpha shape and is better suited for transparent PNGs and SVGs.

Frequently asked questions

The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple shadows with comma-separated values. Each shadow requires at minimum the X offset, Y offset and optional blur radius.

box-shadow: X Y blur spread color. X and Y offset the shadow position. Blur softens the edges — a higher value means a more diffused shadow. Spread expands (positive) or shrinks (negative) the shadow size before blurring.

box-shadow follows the rectangular box model of the element. filter: drop-shadow() respects the element's alpha channel and actual shape, making it suitable for transparent PNGs and SVGs. box-shadow is more performant for rectangular elements.

Adding "inset" to box-shadow places the shadow inside the element border rather than outside. This creates a pressed-in or recessed effect, useful for toggle states, active buttons and depth-illusion UIs.

No. box-shadow does not affect the element's layout or take up space in the document flow. It is purely visual. Use outline or border if you need to affect layout or spacing.

Realistic shadows use rgba() with low opacity (0.1–0.3), a moderate blur (15–30px), zero spread, and a small positive Y offset. Layering 2–3 shadows of different sizes and opacities gives the most natural result.

Yes. box-shadow has been supported in all major browsers since IE9 and requires no vendor prefixes in any current browser. It works on virtually every device in use today.

CSS box-shadow — how it works and when to use it

Frequently asked questions

Explore Our Network