To understand filter's performance impact, we should first find out what they do. When the browser loads a page, it needs to apply the styles, run the layout and paint process and display the final result. CSS filters kicks in just before displaying the page on the screen. The filters will make a snapshot of the rendered page and then apply graphic modifications to the specific pixels. When this is ready, the page will be displayed.

This process takes additional time when drawing the page, in most cases a couple of ms, meaning the impact onto the initial loading time will be almost unnoticeable. There are some considerations though:

• the bigger the pictures, the longer the filtering process
• most filters work really quick on any platform, but those that do any kind of blurring are way slower than the others. I won't go into more details for now, but I will gladly explain why if you wish.
• although the support is considerably good, filters are not supported by older IEs, older mobile browsers and currently IE Edge don't support the url function.
• some known slow filters are - opacity, blur and url().

Another important fact is that CSS filters don't trigger any layout or paint process, meaning they won't heavily impact your website performance.