CSS Visual Directory
Drop Shadow Filter
A shadow that follows the actual shape of the element, including transparency, rather than its box.
Edit Drop Shadow Filter
Change any value to see it update live.
About this entry
What it is
A shadow that follows the actual shape of the element, including transparency, rather than its box.
Logos, cut-out PNGs and icons where a rectangular shadow would look wrong.
Copy & use
How to copy and use drop shadow filter
- 01
Copy the complete value
Use the copy button above so the value is captured without its label, description or surrounding page text.
- 02
Paste it where you need it
Logos, cut-out PNGs and icons where a rectangular shadow would look wrong.
- 03
Check the final result
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Value by value
What each part of this rule does
Shadows the element's actual silhouette rather than its bounding box, so transparency in a PNG or an SVG is respected instead of being squared off.
0 8px- Offset, the same as a box shadow.
12px- Blur radius. Filters take no spread value.
rgba(0, 0, 0, 0.35)- Colour and strength.
Making it yours
How to adjust drop shadow filter
Chain two drop-shadows for a layered falloff, the same trick as a layered box shadow. On an SVG icon this is the only shadow that follows the strokes.
Worth knowing before you ship it
It is meaningfully more expensive than box-shadow and creates a new stacking context, which can quietly break z-index expectations. Use box-shadow for plain rectangles.
Common questions
Using drop shadow filter
What is drop shadow filter?
A shadow that follows the actual shape of the element, including transparency, rather than its box. Logos, cut-out PNGs and icons where a rectangular shadow would look wrong.
Where do I put the drop shadow filter CSS?
Paste the declaration inside the rule for the element you are styling — a class, an id or a component's scoped stylesheet. Logos, cut-out PNGs and icons where a rectangular shadow would look wrong. Change one value at a time so you can see what each part contributes, and check the cascade in case a more specific rule already sets the same property.
Will drop shadow filter work everywhere?
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Can I customise drop shadow filter after copying?
Paste the declaration into the selector for the element you want to style. Adjust one value at a time and check the cascade so an existing rule does not unexpectedly override the effect.
Also known as
Keep browsing