✨drop-shadow() Generator
OR
The `drop-shadow()` CSS filter allows you to create a shadow that conforms to the shape of an element's content, rather than its bounding box. This is perfect for logos, icons, or any image with transparency. Our generator lets you upload your own image to test the effect. Use the sliders to control the shadow's offset, blur, and color, and instantly get the CSS code you need.
Frequently Asked Questions
What is the difference between `box-shadow` and `drop-shadow()`?
`box-shadow` creates a shadow around the rectangular box of an element. `filter: drop-shadow()` creates a shadow that follows the contour of the visible parts of an element, ignoring transparency. This is ideal for transparent PNGs or SVGs.
Is `drop-shadow()` well supported?
Yes, the `filter` property and the `drop-shadow()` function are supported by all modern evergreen browsers. It is safe to use for the vast majority of users.
