CSS - Filters - How to use drop-shadow

In Summary

This example demonstrates using CSS Filters on the parent div, to transform all contained elements, including border, image, background color and text.

CSS

div.example {
    filter: drop-shadow(10px 10px 5px saddlebrown)
}

Syntax drop-shadow(offset-x offset-y shadow-depth color);

Step by Step

Original Image
No filter

HTML

Simplified

<div class="example">
    <figure>
        <img src="images/the-hare.gif" />
        <figcaption>The hare takes aim</figcaption>
    </figure>
</div>

CSS

div.example {
}

drop-shadow

CSS

div.example {
    filter: drop-shadow(10px 10px 5px saddlebrown)
}

Syntax drop-shadow(offset-x offset-y shadow-depth color);

Arguments must be space separated. Commas will not work.