Welcome to part 3 of my deep dive into Shadows in CSS.


Contents

  1. text-shadow basics
  2. box-shadow basics
  3. filter:drop-shadow You are Here!
  4. Diving even deeper (coming soon)

The filter function

The filter CSS property lets you apply graphical effects like blurring or color shifting to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders (MDN).

The CSS standard includes several functions that achieve predefined effects: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia and, of course, drop-shadow. You can also reference an SVG filter with a URL to an SVG filter element. Here's a quick demo, so you can get a glimpse of what each function does:

You can, if you want, add more than one filter, by stacking them, without commas, like this:

  IMG {
    filter: contrast(175%)
            brightness(3%);
}

You can also use the url function to apply an SVG filter to your element.

We will focus on the drop-shadow function. If you want, you can check the "read more" links in the bottom of the post to find out more about the other functions.


filter: drop-shadow()

The drop-shadow function applies a drop shadow effect to the input element. It accepts a shadow parameter - same as box-shadow, with the exception of the inset keywords, which is not allowed with filter: drop-shadow().

Just like box-shadow, drop-shadow allows two to four length values. The first two values will be interperted as horizontal and vertical offset, the third will be interperted as blur radius and the 4th will apply the spread radius. The last value in the list is the shadow's color.

The difference between box-shadow and filter: drop-shadow() is simple: box-shadow casts a shadow behind the element's BOX and ignores background transparency, while filter: drop-shadow casts a drop shadow behind the element, its content and its pseudo-elements (in an image it will also apply the shadow to the image's alpha mask*, keeping the image shape).

* Alpha mask: the transparent area in an image with transparent background

Some browsers provide hardware acceleration for better performance with drop-shadow().


Browser Support

Unlike text-shadow and box-shadow, at the moment - browser support for filter is solid: with the exception of Internet Explorer (all versions) all major browsers support the filter property, with Edge sporting some known issues.

There is no need to use prefixes for filter.


Side note to veteran readers (and those of us who still work on older code): You may remember a microsoft-only property called -ms-filter, which used to be an Internet Explorer only way to apply filters to elements. It is not compatible with the new CSS3 filter, and is NOT a CSS standard in any way or form.


I hope these first three parts were informative for you. The next post in the series will show you some of the cool stuff you can do with all three of shadow methods. So, until then...


Read more about filter:

My name is Rotem Horovitz, and I am a CSS Developer currently working at investing.com.

You can find me at:

Facebook | Twitter | LinkedIn