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:
url function. 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.