Last updated 23 August 2026
Blur vs spread
Blur softens the shadow's edge into a gradual fade. Spread changes the shadow's size before that blur is applied — positive spread makes it larger than the element, negative makes it smaller. Small blur with some spread gives a crisp, defined shadow; large blur with little spread gives a soft glow.
Shadows that look real, and ones that cost you
A convincing shadow follows a light source. Since most interfaces imply light from above, a small downward offset with a soft blur reads as natural, while a shadow offset upward looks subtly wrong even to people who cannot name the problem.
Subtlety usually wins. Large offsets and heavy opacity make an element look pasted on rather than lifted; a shadow you notice as a shadow is generally too strong. Layering two or three faint shadows — one tight, one wide — gives more depth than a single heavy one.
There is a performance cost worth knowing. Very large blur radii are expensive for the browser to paint, and animating a box-shadow forces it to repaint on every frame, which is a common cause of stutter on phones. If you want a shadow that changes on hover, animating opacity on a pseudo-element is far cheaper than animating the shadow itself.
Related guide: How to build a brand colour palette that works
Common questions
What's the difference between blur and spread?
Blur softens the shadow's edge, making it fade out gradually. Spread grows or shrinks the shadow's size before blurring is applied — a positive spread makes the shadow bigger than the element itself.
What is glassmorphism?
A frosted-glass look made from a semi-transparent background, a background blur (backdrop-filter), and a subtle light border — popularized in iOS and modern web UI. It needs something visually busy behind it to actually show the blur effect.
Why does glassmorphism need -webkit-backdrop-filter too?
Safari historically required the -webkit- prefixed version of backdrop-filter to support it at all. Including both the standard and prefixed property is the safe way to support all major browsers.