ZeroServer.tools

Drop Shadow Filter Generator

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

Offset X4px

Offset Y4px

Blur radius8px

Shadow color

CSS output

.element {
  filter: drop-shadow(4px 4px 8px #00000066);
}

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.

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

Private & free — this tool runs entirely in your browser.