Question 1

What is the difference between blur radius and spread radius?

Accepted Answer

The blur radius controls the softness and diffusion of the shadow's edge, determining how gradually the shadow fades from solid color to fully transparent. A high blur radius creates a hazy, soft glow. The spread radius, on the other hand, changes the physical dimensions of the shadow's base shape before any blur is applied. A positive spread radius makes the shadow larger than the element itself, while a negative spread radius shrinks the shadow so it is smaller than the element.

Question 2

Why does my box shadow look cut off or clipped?

Accepted Answer

Box shadows are painted outside the element's standard bounding box. If the element is placed inside a parent container that has the CSS property overflow: hidden applied to it, any part of the shadow that extends beyond the parent's borders will be invisible (clipped). To fix this, you must either remove the overflow: hidden rule from the parent, or add sufficient padding or margin to the parent container to physically accommodate the full width and height of the shadow's offset and blur.

Question 3

Can I animate a box shadow on hover?

Accepted Answer

Yes, you can smoothly transition a box shadow using the CSS transition property (e.g., transition: box-shadow 0.3s ease;). However, animating box-shadow directly can cause performance issues (jank or stuttering) on lower-end devices because the browser must recalculate the complex Gaussian blur algorithm for every frame of the animation. For high-performance animations, experts prefer placing the shadow on a pseudo-element (::before or ::after) and animating the opacity of that pseudo-element instead.

Question 4

How do I apply multiple box shadows to a single element?

Accepted Answer

CSS allows you to stack an infinite number of box shadows on a single element by separating each shadow declaration with a comma. For example: box-shadow: 2px 2px 5px red, -2px -2px 5px blue;. The browser paints these shadows in a specific z-axis order: the first shadow in the list is painted on top (closest to the element), and subsequent shadows are painted behind it. This technique is heavily used to create photorealistic, multi-layered smooth shadows.

Question 5

How do I make an inner shadow instead of an outer shadow?

Accepted Answer

To render the shadow inside the element rather than outside of it, you simply add the keyword inset to the beginning or end of your box-shadow value declaration. For example: box-shadow: inset 0px 4px 8px rgba(0, 0, 0, 0.2);. Inset shadows are commonly used to make elements look like they have been pressed into the screen, which is a popular technique for styling active buttons, form input fields, or progress bar tracks.

Question 6

Why doesn't my box shadow match the shape of my transparent PNG image?

Accepted Answer

The box-shadow property only calculates the shadow based on the rectangular HTML bounding box of the <img> element, ignoring the transparent pixels within the image file itself. To create a shadow that perfectly traces the opaque contours of a transparent PNG, SVG, or complex CSS shape, you must use the CSS filter property instead. Applying filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.5)); will force the browser to calculate the shadow based on the image's alpha channel.

Question 7

Are pure black shadows bad for web design?

Accepted Answer

Yes, using a pure black shadow (#000000) with high opacity is generally considered poor design practice. In the real world, shadows are rarely pure black; they are areas of reduced light that take on the ambient colors of the environment. Pure black shadows often look harsh, muddy, and artificial on digital screens. Professional designers use low opacities (between 5% and 15%) and often tint the shadow color to match the hue of the background surface to create a more natural, cohesive aesthetic.

Question 8

Does a box shadow affect the layout or size of my HTML elements?

Accepted Answer

No, a box shadow does not affect the document flow or the calculated dimensions of an element in the DOM. It is purely a visual decoration painted onto the screen. Adding a 50-pixel box shadow to a button will not push adjacent text out of the way, nor will it trigger scrollbars on the page unless it specifically interacts with the viewport edges. Because it does not affect layout, adding or changing a shadow does not trigger a browser "reflow," though it does trigger a "repaint."

CSS Box Shadow Generator

Command Palette