Drop Shadow Filter Generator
Generate CSS filter: drop-shadow() with live preview — works on PNG transparency.
The first layer paints on top.
drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.4)).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-shadowalways 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
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.