If you are a fan of Instagram, then you must be aware of filters. Filters are the most common feature in photo editing tools, but it is also quite popular among web developers. Filters are really useful feature that allows web developers to display visual effects. Today we are going to see what is CSS Filters, various types of available filters, which are the browsers that supports, demos and how you can make use of it in your web application or website. Well, the important metric that you should consider while using CSS Filters is Performance. It means, we’ll also glimpse through its performance when viewed on desktop and mobile devices.
How Filters actually work?
In simple terms; Filters are nothing but the post processing of your page content. It means, when the page is loaded, the browser will apply styles, layouts and renders it. Filters are actually activated by the browsers just before the page is drawn on the screen. Filters takes the snapshot of page content and processes it to apply some magical visual effects. Well, I’m not a genius to explain more. At least, this is what I understood about Filters.
How to apply a CSS Filter?
Filter effects can be achieved via CSS; by using ‘filter’ property applied to HTML element.
For example, something like below:
div { +filter: grayscale(100%); }
Here, filter property should have vendor specific prefixes
-webkit-filter:
-moz-filter:
-ms-filter:
-o-filter:
filter:Checkout below example; where the first image is original and the other one is in grayscale.
What are the various filters available in CSS?
sepia CSS Filter:
saturate CSS Filter:
invert CSS Filter:
hue-rotate(degree of angle) CSS Filter:
opacity CSS Filter:
brightness CSS Filter:
contrast CSS Filter:
blur(5px) CSS Filter:
drop-shadow(16px 16px 20px black) CSS Filter:
CSS Filters – Performance Impact
As a web developer, you should be really concerned about the performance. Most of these filters should work faster on modern browsers and devices that support CSS Filters. Of course, the filters that does blurring will take a bit of more time than other filters.
CSS Filters – Supported Browsers
CSS Filters are almost supported on all modern browsers. But you should use the corresponding vendor specific prefixes to apply filters. The demos created on this page have been verified on webkit browser and is experimental on IE and Firefox.
