DEV Community

loading...
Cover image for Drop-shadow on clipped element  - CSS Only

Drop-shadow on clipped element - CSS Only

iamatifriaz profile image - ・1 min read

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.

Discussion (0)

pic
Editor guide