Box Shadow Generator

box-shadow tints a rectangle around the element's border box, ignoring transparent pixels inside. filter: drop-shadow casts a shadow of the actual painted shape — useful for PNGs, SVGs, and rounded clip-paths where you want the shadow to hug the content, not the bounding box.

Use larger blur than offset, and a translucent shadow colour (rgba(0,0,0,0.1) instead of solid black). Real shadows are soft and faint; designers new to CSS tend to use 5 5 0 0 black, which looks like clip-art. Two stacked shadows — one tight, one diffuse — also mimic real light.

Yes — comma-separate them in the box-shadow value. The first shadow renders on top. Stacks of 3–5 shadows with increasing blur and decreasing opacity produce realistic elevation (the "Material Design" look is essentially this).

Only the first paint is expensive. After layout, the shadow is rasterised and reused. Animating the shadow directly (e.g., on hover) is the costly case — prefer animating a secondary element or using opacity on a pre-rendered pseudo-element.

Yes — inset shadows render inside the border, like the element is pressed in. Use them for focus rings on tactile-looking buttons, sunken panels, or highlighting scrollable overflow. They stack with outer shadows in the same box-shadow value.