Use CSS filter to Create a Drop Shadow

Jhey Tompkins: [0:00] We want to apply a drop shadow to this image, a shadow that follows the outline of our image. This image is a transparent png. We may initially reach for the box-shadow property, but this won't work because it applies shadow to the box modal of our image.

[0:17] To achieve that drop shadow effect we can use the CSS filter property with the drop-shadow() function. We are going to match as closely to our box-shadow, so we have an offset-x of 10px, an offset-y of 10px, a blur-radius of 10px and we use the same color as we did for the box-shadow. Now we have a drop shadow that follows the outline of our image.

[0:41] It's worth noting that the blur-radius and the color are both optional, but this results in a much harsher drop shadow with no blurring and black as the default color. We can apply a drop shadow to any element. Here we've updated our image to be enclosed within a figure tag and it also has a caption.

[1:00] Instead of applying the drop shadow to the image, we now apply it to the containing element, which is the figure element. We can see how that drop shadow follows the outline of the figure element's children, the image and the fake caption.

[1:14] In review we can use CSS filter property with the drop-shadow function to create a drop shadow around an element's content. This is particularly useful where the outline of an element's content is not basic, where we might have previously opted to use a box shadow.