Drop Shadow Filter Generator

Generate CSS filter: drop-shadow() with live preview — works on PNG transparency.

Layers: 1Offset X: 4pxOffset Y: 4pxBlur: 8pxColor: #000000

Drop Shadow Presets

Layers (1/8)

The first layer paints on top.

Layer 1

Offset X4px

Offset Y4px

Blur8px

Opacity0.4

Color

drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.4))

CSS Output

.element {
  filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.4));
}

Preview (on transparent)

drop-shadow follows the shape outline — unlike box-shadow which is always rectangular.

filter: drop-shadow() vs box-shadow

filter: drop-shadow() applies a shadow that follows the actual alpha channel of the element, making it work correctly on PNGs and SVGs with transparent backgrounds. box-shadow always creates a rectangular shadow around the element's bounding box. Use drop-shadow() when you need the shadow to trace the visible shape.

Drop shadows chain, and that is how you get depth on a cut-out shape. Because filter is a list of functions, several drop-shadow() calls apply in sequence, and each one shadows the result of the previous — so a tight dark layer under a wide soft one reads as real elevation where a single shadow reads as a blur. Add up to eight above; the first in the list is applied first.

Two things differ from box-shadow, and the editor reflects both: drop-shadow() takes no spread radius and has no inset — there is no “inside” of an alpha mask to draw into. Its layers are also separated by spaces, not commas: a comma-separated filter list is invalid CSS and the browser discards the whole declaration, which is exactly the mistake one shared generator should make impossible.

For the box-shadow property, use the CSS Box Shadow Generator. For text shadow, try CSS Text Shadow Generator. For a full CSS filter playground, see CSS Filter Generator.

Built and maintained by Meet Shah · Last updated 4 August 2026

What this tool is used for

Shadowing a PNG with transparency, which follows the shape rather than the box.
Producing a shadow that follows an SVG icon's outline.
Comparing filter: drop-shadow() against box-shadow for one case.
Adding a shadow to a cutout image so it sits on the page rather than floating.
Tuning offset and blur against a live preview.

Frequently Asked Questions

How does drop-shadow differ from box-shadow?: filter: drop-shadow() follows the element's actual shape including transparency, so it traces the outline of a PNG logo or an SVG icon. box-shadow always draws the rectangular box.
Why does it have no spread value?: Because the filter operates on the rendered alpha channel rather than a geometric box, so there is nothing to expand. Only offset, blur and colour are available.
Can several be stacked?: Yes — chain multiple drop-shadow() functions in one filter and each applies to the result of the previous. That is how a glow with several layers is built, and it is why the cost rises quickly.
Is it expensive to render?: More than box-shadow, since the browser must read the alpha channel and blur it. On a large or frequently repainted element it is worth checking, especially when animated.
Does it work on an SVG?: Yes, and it is the main reason to use it — the shadow follows the vector shape rather than its bounding box. For an inline SVG it applies to the whole element unless scoped to a child.

Common errors and gotchas

Using box-shadow on a transparent PNG, which shadows the rectangle rather than the shape.
Applying the filter to a large element, which is expensive to composite.
Forgetting the filter applies to the whole element including its children.
Applying it to a container rather than the image, which shadows every child separately.
Stacking several filters and getting a different result depending on the order.