O'Reilly

CSS Filters

By on  
CSS Filters

CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have a look at how CSS filters work and how you can quickly create elements that are beautifully filtered!

There are many CSS filters to choose from: grayscale, blur, sepia, saturate, opacity, brightness, contrast, hue-rotate, and invert. While each property value generally falls between 0 and 1, there are a few exceptions. The blur property uses a unit of pixels and can be any whole number, and the hue-rotate filter value is a whole number with a "deg" unit.

The following CSS snippet will blur an element:

.myElement {
	-webkit-filter: blur(2px);
}

Multiple filters are separated by spaces, so we could also add grayscale and opacity values to the blur:

.myElement {
	-webkit-filter: blur(2px) grayscale(.5) opacity(0.8);
}

Let's get crazy with hue-rotate as well:

.myElement {
	-webkit-filter: blur(2px) grayscale(.5) opacity(0.8) hue-rotate(120deg);
}

If static filtering isn't enough for you, CSS filters also animate with @-webkit-keyframes:

@-webkit-keyframes testAnim {
	0% {
		-webkit-filter: grayscale(0.5) blur(1px) saturate(2);
	}
	100% {
		-webkit-filter: grayscale(0.2) blur(6px) saturate(9);
	}
}

/* the photo to be animated via filters */
#animatePhoto {}
#animatePhoto:hover {
	-webkit-animation-name: testAnim;
	 -webkit-animation-duration: 2s;
	 -webkit-animation-iteration-count: 1;
	 -webkit-animation-direction: alternate;
	 -webkit-animation-timing-function: ease-out;
	 -webkit-animation-fill-mode: forwards;
	 -webkit-animation-delay: 0s;
}

Expect a performance hit with heavy CSS filter usage; be sure to heavily test your site wherever filtering is used. CSS filters have not yet hit mobile, but assume that CSS filters will be taxing in that environment as well.

Note: I've yet to successfully filter a <video> tag; it's possible that feature isn't in the first implementation.

The additional of CSS filters to the web provides a new level of customization for images, video, and DOM nodes in general. We should see some solid, practical uses for CSS filters emerge in the coming years. Have fun playing around with CSS filters and let me know if you can think of some immediate, practical uses!

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

  • 5 Awesome New Mozilla Technologies You&#8217;ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

Incredible Demos

Discussion

  1. Thanks David for this really nice review of what the future of css is going to be.
    Even if all those filter won’t be available on ie before year 2100, it’s anyways some really exciting new features of css.

    Thanks again

  2. Wow, awesome as always :)
    CSS power !

  3. JeroenG

    Sweeet! This is just what I needed for my next project.
    Now I’m wondering,… what would be a good fallback for the blurfilter on FF and IE browsers?

  4. Matt

    Isn’t adding a “sepia” filter going a bit too far though?

    • Too far? Why?

    • Matt

      Well, unlike the other filters, sepia seems to be more of an extra effect rather a core filter and thus what I would consider to be “bloat”. Just imagine if they added tons of other filters similar to this like “cool-dark-feel” or all the effects instagram offers; it wouldn’t be nice since it’s too fixed. A color-tint filter would’ve been more flexible and allow more possibilities, albeit slightly more difficult for beginners to take advantage of.

  5. Oh, great. Just when we thought we were rid of IE like non-standard properties, this comes along.

    • At least this is based on an existing W3C spec though…

  6. Thanks David..Wow…

  7. Nice to have some good stuffs about css filters. Thanks.

  8. Using grayscale and sepia → normal color will be handy for thumbnail image, navigation, and other element hover effects. For those that think stepping back 60 years to Ektachrome, the instagram effect is now possible with CSS filters.

  9. gorn

    Why onl webkit?

  10. I love it.

  11. It would be nice if you also mention/ gives a try the svg filters already available in Firefox. They are awesome also!

  12. Will be useful in mix and match applications. Like color selection for garments. You don’t have to make photographs of each color can just change colors with filters. This saves a lot of work in photogrpahy and makes the application so lightweight.
    Just as you asked for some practical applications.

  13. It’s a bit ironic that all these cool HTML5 filters can’t be seen on mobiles. I thought only Flash did cool things that couldn’t render on mobiles, so they tried to kill it…. Where’s the improvement?

    HTML5 is a dismal step backwards if you know how to code Flash, and the mythology that it somehow has the potential to be a better platform is endlessly being proven to be bunk. Check out Google ‘Web Designer’ https://www.google.com/webdesigner/ for yet more proof of an exclusive brand spanking new HTML5 tool kit that can only render properly on very few browsers….

  14. Thanks for these! Awesome css power!

  15. gabe

    thanks for posting this David. I don’t think we’ll see filtering on video elements for the same reason you can’t change the video matte color with css, but here is a cool approach that could provide a work-around: http://html5doctor.com/video-canvas-magic/
    @Philip La Vere, I don’t think flash got killed off because it was inferior in any way, I think it was the restrictive licensing that killed it.

  16. mind blown!

  17. miqureshi

    Growing css power i like it!

  18. An

    can i save the image after editing it using css filter
    Now it is inside on a div.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Open Files from Command Line on OS X

    I'm as much of a fan of application UIs as anyone else but I'm finding myself working more and more from the command line lately.  Much of that is becoming obsessed with media manipulation but I'm forcing myself to use less UIs so that I...

  • Get Stock Quotes From Command Line

    When I conned my way into my first professional programming gig, I didn't really think much about money -- just that I was getting my foot in the door.  But as my career has gone on, I've been more aware of money, investing, and retirement.  I've recently...

  • Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

  • Create an Image Preview from a Video

    Visuals are everything when it comes to media.  When I'm trying to decide whether to watch a video on Netflix, it would be awesome to see a trailer of some kind, but alas that isn't available.  When I'm looking to download a video on my computer,...

  • New:  Webdesigner News!

    A new and exciting website has recently been launched for web designers and developers. You likely spend hours every morning browsing through hundreds of posts on your RSS feeds, hoping to stumble across relevant stories. Webdesigner News was built to provide web designers and developers with...