CSS Drop Shadow Generator
Generate filter: drop-shadow() CSS. Unlike box-shadow, it follows the actual shape outline of SVGs, clip-path elements, and transparent PNGs.
filter: drop-shadow() follows the actual shape outline — perfect for SVGs, PNGs with transparency, and clip-path elements.CSS generated is free to use — no attribution required.
What is the difference between drop-shadow and box-shadow?
filter: drop-shadow() computes the shadow from the element's alpha channel — it follows irregular shapes, SVG paths, and clip-path cutouts. box-shadow always uses the rectangular bounding box, ignoring transparent areas.
What is the CSS drop-shadow syntax?
filter: drop-shadow(offset-x offset-y blur-radius color). Note: there is no spread radius and no inset option — these are features of box-shadow only.
When should you use drop-shadow instead of box-shadow?
Use drop-shadow on SVG icons, PNG logos with transparent backgrounds, and any element using clip-path. The shadow will follow the contour rather than the box.
What is the browser compatibility for CSS drop-shadow?
filter: drop-shadow() is supported in all modern browsers. For IE11, use box-shadow as a fallback.