CSS Drop Shadow Generator

How do you use the CSS drop shadow generator?

Adjust the offset, blur and color and watch the shadow trace the shape rather than the box. The preview deliberately uses a non-rectangular element, because that is where drop-shadow() differs from box-shadow and where it is worth using at all.

What is the filter: drop-shadow syntax?

drop-shadow() is a filter function, so it is used as filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)). It takes an x offset, a y offset, an optional blur radius and a color.

There is no spread value and no inset keyword — both exist for box-shadow and neither has an equivalent here. If you need a shadow that is larger than the element or drawn inside it, drop-shadow() is the wrong tool.

How does drop-shadow differ from box-shadow?

box-shadow is a property that draws around the element’s border box, rounded corners included. drop-shadow() is a filter that works from the rendered alpha channel, so it follows whatever is actually visible.

On a plain rectangular card the two look identical and box-shadow is the better choice. On a transparent PNG, an SVG icon, a clipped shape or a pure-CSS triangle, box-shadow draws a rectangle around your shape and drop-shadow() is the only one that does the right thing.

How do you stack multiple drop shadows?

Not with commas. Commas are how box-shadow stacks layers, but filter takes a space-separated list of functions, so multiple shadows are chained: filter: drop-shadow(0 1px 1px black) drop-shadow(0 4px 8px black).

Each one is applied to the result of the previous, so the second shadow traces the first shadow’s silhouette as well as the element. That compounding is what makes chained drop shadows look heavier than the equivalent box-shadow layers, and why two is usually enough.

Does drop-shadow work on transparent images and SVG?

That is its main reason to exist. Applied to a transparent PNG or an inline SVG, it traces the artwork rather than the image box, which is how you put a shadow under a logo or an icon without baking it into the asset.

It works on text too, following the glyph outlines — though for text alone text-shadow is cheaper and offers the same control.

Why does drop-shadow have no spread value?

Because there is no box to grow. Spread inflates a rectangle before blurring it, which is a well-defined operation on a border box but not on an arbitrary alpha channel — expanding a silhouette outward is a genuinely harder problem than expanding a rectangle.

To fake a thicker shadow, chain two or three drop-shadow() calls with slightly different offsets, or increase the blur and reduce the alpha.

Does drop-shadow affect layout or stacking?

It takes no space in the layout, like any shadow. But because it is a filter, it brings the filter side effects with it: the element gets a new stacking context, and it becomes a containing block for absolutely and fixed-positioned descendants.

That last part is the one that bites. A fixed-position child inside an element carrying a drop-shadow() stops being positioned against the viewport and starts being positioned against that element. If a dropdown or modal starts behaving strangely, check whether an ancestor picked up a filter.

Is drop-shadow slower than box-shadow?

Generally yes. box-shadow draws a known rectangle, while drop-shadow() has to read the rendered alpha channel and blur that — more work, and more still when several are chained since each processes the previous result.

On a handful of icons the difference is irrelevant. On a long list, on something animating, or on a large blurred area it is worth measuring, and worth using box-shadow wherever the element is actually rectangular.

What is the browser compatibility for filter: drop-shadow?

filter and drop-shadow() are supported unprefixed in every current browser. The -webkit-filter prefix stopped being necessary after Safari 9.1 and can be removed. Because an unsupported filter is simply ignored, the fallback is an element with no shadow rather than a broken layout.