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

#codepen #css #programming

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.

Top comments (0)

Read next

shashankpatil15 profile image

Understanding the Use of Underscore (`_`) in JavaScript

shashank Wankhade Patil -

munemprionto profile image

Using Git as Your Personal To-Do List

Munem Prionto -

babar_ali profile image

Create a Futuristic 3D Digital Clock with HTML, CSS, and JavaScript

babar ali -

areeb_anwar_813df06ee1124 profile image

You want Fancy Fonts on you website: Fancy Font Generator

WEBDEVTALES -