{"id":4909,"date":"2022-01-16T01:00:00","date_gmt":"2022-01-16T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/css-image-filter\/"},"modified":"2025-06-04T09:53:41","modified_gmt":"2025-06-04T07:53:41","slug":"css-image-filter","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/css-image-filter\/","title":{"rendered":"CSS Image Filter [Usage + 10 Examples]"},"content":{"rendered":"\n

Whether you run an online portfolio<\/a>, a one-page website, or some another type of website<\/a> which works with a lot of images, with a few lines of CSS, we can do an extremely surprising amount of image manipulation by adding image filters with CSS: changing brightness, altering colours, etc.<\/p>\n\n\n\n

You can actually do so much with CSS and you may not even realise it. In this article, I\u2019m sure you will be surprised by what you can do with images and pure CSS.<\/p>\n\n\n\n

A lot of the examples here rely on simple image filters (CSS)<\/strong> Luckily these are supported on all your modern browsers, but it is always important to test to make sure your use case works.<\/p>\n\n\n\n

What is the filter<\/code> property?<\/h2>\n\n\n\n

The filter<\/code> property provides us a way to modify the way an elements looks by adding certain effect to it. They are usually used in images, backgrounds and sometimes borders.<\/strong><\/p>\n\n\n\n

For example, we can apply a blur effect to an image, a black an white filter or change properties like contrast, saturation etc.<\/p>\n\n\n\n

How to apply a filter<\/code>?<\/h2>\n\n\n\n

All we have to do is use the filter<\/code> CSS property<\/strong> and add the effect function and values for it.<\/p>\n\n\n\n

For example:<\/p>\n\n\n

.image-filter<\/span>{\n    filter<\/span>: hue-rotate<\/span>(45deg<\/span>);\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n
<img<\/span> class<\/span>=\"image-fitler\"<\/span> src<\/span>=\"my-image.jpg\"<\/span> alt<\/span>=\"Image Filter\"<\/span> \/><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Interesting Image Filter – CSS Examples<\/h2>\n\n\n\n
Let\u2019s jump straight in shall we – Each example here will feature the original image on the left and the layered image on right, allowing you to compare the filter and its effect. Check out the CodePens to see how they are working as well.<\/p>\n\n\n\n
1. Invert Image Filter<\/h3>\n\n\n
filter<\/span>: invert<\/span>([<number> | <percentage>]<\/span>);\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
\n
Invert the colours of your images with this CSS image filter.<\/p>\n<\/blockquote>\n\n\n\n