DEV Community

Cover image for Drop-shadow on clipped element - CSS Only
Atif Riaz
Atif Riaz

Posted on

Drop-shadow on clipped element - CSS Only

Drop-shadow is one of CSS Filter and by using this We can create a drop shadow for every clipped element by applying a drop-shadow filter to the element's parent. Pretty cool!

Drop-shadow is one of CSS Filter and by using this We can create a drop shadow for every clipped element by applying a drop-shadow filter to the element's parent

Drop-shadow is one of CSS Filter and by using this We can create a drop shadow for every clipped element by applying a drop-shadow filter to the element's parent

In the attached image you can see clearly that every element has a drop shadow and I just applied drop shadow only once to their parent.

Code + Demo 👇

Note: CSS filters (including drop-shadow) are supported in all modern browsers.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay