No Login Data Private Local Save

CSS drop‑shadow() Filter Generator - Online Box vs Text Shadow

Developer Tools Generator CSS drop‑shadow filter generator
39
0
0
0
Shadow Generator
Quick Presets
Subtle Medium Strong Floating Neon Glow Sharp
Offset X8px
Offset Y12px
Blur Radius16px
Spread Radius4px
Opacity0.28
Copy filter: drop-shadow(8px 12px 16px rgba(15, 23, 42, 0.28));
Hello Shadow
drop-shadow() drop-shadow(8px 12px 16px rgba(...))
box-shadow box-shadow: 8px 12px 16px 4px rgba(...)
Aa
text-shadow text-shadow: 8px 12px 16px rgba(...)
Frequently Asked Questions
What's the difference between drop-shadow() and box-shadow?
drop-shadow() is a CSS filter function that follows the alpha channel (actual shape) of an element — including clip-path, transparent PNG areas, and SVG contours. box-shadow applies to the element's rectangular border box (though it respects border-radius). Use drop-shadow for irregular shapes, images with transparency, and SVG icons. Use box-shadow for standard rectangular containers.
Does drop-shadow() support spread-radius?
No. drop-shadow() only accepts offset-x offset-y blur-radius color. The spread-radius parameter is exclusive to box-shadow. If you need to expand or contract the shadow area, box-shadow is your only option among these three.
Can I apply multiple shadows with drop-shadow()?
Yes! You can chain multiple drop-shadow() functions within the same filter property, separated by spaces (not commas). Example: filter: drop-shadow(2px 2px 4px #000) drop-shadow(-2px -2px 4px #fff); For box-shadow and text-shadow, use commas to separate multiple shadows.
Does text-shadow support spread-radius?
No. text-shadow accepts only offset-x offset-y blur-radius color, similar to drop-shadow(). Neither supports spread-radius — only box-shadow does.
Which browsers support CSS filter: drop-shadow()?
filter: drop-shadow() is supported in all modern browsers — Chrome 18+, Firefox 35+, Safari 6+, Edge 79+. It's safe to use in production. For IE11, it's not supported, but IE11 usage is negligible today.
Why does my drop-shadow look different on a PNG vs an SVG?
drop-shadow() follows the alpha channel of the rendered element. For PNGs, the alpha channel defines transparency per-pixel, so the shadow precisely follows the visible image contour. For SVGs, the shadow follows the SVG's rendered shape outline. Both behave correctly — the difference depends on the source graphic's transparency map.
Can I animate drop-shadow() with CSS transitions?
Yes! Since filter is an animatable CSS property, you can transition drop-shadow() smoothly. Example: transition: filter 0.3s ease; This works great for hover effects. Note that animating box-shadow has better performance in some browsers due to GPU compositing differences.
🔧 Related Tools