CSS

CSS Shadows: A Deep Dive Part 3 – The CSS3 Filter Function

Posted onAuthorRotem Horovitz
CSS Shadows Part 2: filter function
Reading Time: 3 minutes

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:

See the Pen CSS Filter demo by Lurx (@lurx) on CodePen.

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 2-4 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).

See the Pen filter:drop-shadow() demo with contents by Lurx (@lurx) on CodePen.

* 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 might remember a microsoft-only property called -ms-filter, which was 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 3 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:
This post was originally published as a CodePen post on May 28, 2018