Extend Extend CSS Filters with URL - How to make your own one?

HTML-CSS
1

Hi Friends,

I just found this awesome CSS pixel filter and would like to show it to the community. If someone knows other special CSS filter URLs please share it here.

The only downside is that this filter will slow down the website significatly. Is there any work around to make this filter more lightweight?

And is it possible to create a custom CSS filter using filter: url(); ?

How does it work?

This is the filter effect:

Screenshot 2022-07-04 at 20.29.51

This is the filter code:

 filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='b' x='0' y='0'%3E%3CfeFlood x='3' y='3' height='2' width='2'/%3E%3CfeComposite width='5' height='5'/%3E%3CfeTile result='a'/%3E%3CfeComposite in='SourceGraphic' in2='a' operator='in'/%3E%3CfeMorphology operator='dilate' radius='3'/%3E%3C/filter%3E%3C/svg%3E#b");
2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.