Shadows shape an element's sense of "height", while filters adjust its visual texture — the side shadows that make the paper "float" on this tutorial page itself are a combination of the color transparency from Section 5.1 and the box-shadow covered here.
Blur radius; larger values soften the edge; cannot be negative
spread-radius
Spread radius; optional; positive values enlarge the shadow, negative values shrink it
color
Shadow color; usually combined with transparency
Comparing different parameters
Light
Heavy
Outline-style
TipUse box-shadow: 0 0 0 Npx color (zero offset and blur) to simulate an outline that takes up no layout space — it behaves like outline but follows border-radius rounded corners.
Inset Shadows and Layered Shadows
Adding the inset keyword draws the shadow inside the box, commonly used to give input fields a "recessed" feel; box-shadow also supports layering multiple shadows with commas, so you can show a crisp close shadow and a soft distant shadow at the same time, looking closer to real lighting.
filter provides a set of image-processing functions that can be applied directly to an element (including its children and background), without switching to image-editing software for preprocessing:
Function
Effect
blur(8px)
Gaussian blur
brightness(1.2)
Brightness; 1 is the original brightness
grayscale(1)
Grayscale; 1 is fully grayscale
drop-shadow(0 4px 6px rgba(0,0,0,.3))
Shadow that follows the irregular outline of a transparent PNG
The difference between filter: drop-shadow() and box-shadow: the latter follows the element's rectangular box border, while the former follows the actual visible outline of the element's content (including transparent areas) — better suited for adding shadows to irregularly shaped icons or images.
backdrop-filter
Unlike filter, which processes the element itself, backdrop-filter processes the content already rendered behind the element — the standard way to achieve the "frosted glass" effect:
Performance notebackdrop-filter's blur computation is expensive; avoid using it over large areas or stacking multiple layers on the same page, and watch the frame rate especially when scrolling.