Whether you run an online portfolio, a one-page website, or some another type of website 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.
You can actually do so much with CSS and you may not even realise it. In this article, I’m sure you will be surprised by what you can do with images and pure CSS.
A lot of the examples here rely on simple image filters (CSS) Luckily these are supported on all your modern browsers, but it is always important to test to make sure your use case works.
What is the filter property?
The filter 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.
For example, we can apply a blur effect to an image, a black an white filter or change properties like contrast, saturation etc.
How to apply a filter?
All we have to do is use the filter CSS property and add the effect function and values for it.
For example:
.image-filter{
filter: hue-rotate(45deg);
}
Code language: CSS (css)<img class="image-fitler" src="my-image.jpg" alt="Image Filter" />
Code language: HTML, XML (xml)Interesting Image Filter – CSS Examples
Let’s 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.
1. Invert Image Filter
filter: invert([<number> | <percentage>]);
Code language: CSS (css)Invert the colours of your images with this CSS image filter.
The argument is the amount of conversion you want. You can specify a number or percentage. If you use percentage, a value of 100% is completely inverted, while a value of 0% leaves the input unchanged. All modern browsers support this filter.
2. Grayscale Image Filter
filter: grayscale([<number> | <percentage>]);
Code language: CSS (css)Convert your images to grayscale. Choose a percentage of colour to convert.
Just specify a number or percentage, the default value is 1. If you use percentage, a value of 100% will show the image in grayscale, while a value of 0% leaves the image like the original one. All modern browsers support this CSS image filter.
3. Saturate Image Filter
filter: saturate([<number> | <percentage>]);
Code language: CSS (css)Use this image filter (CSS) to super-saturate or desaturate an image.
The filter takes either a number or percentage. If you use a number, a value under ‘1’ desaturates the image, while a vaule over 1 super-saturates it. In this case, I have used 8 to show an extreme effect. All modern browsers support this filter.
4. Sepia Image Filter
filter: sepia([<number> | <percentage>]);
Code language: CSS (css)Use this image filter (CSS) to give the image a sepia tonality.
This CSS image filter converts the image to give it a warmer, more yellow and brown look, depending on the original colours of the image itself. Specify either a number or percentage. In this case, I used a number. It must be between 0 and 1. All modern browsers support this filter.
5. Opacity Image Filter
filter: opacity([<number> | <percentage>]);
Code language: CSS (css)This CSS image filter changes the transparency of an image.
This function is also similar to the opacity CSS property but the difference with filters is some browsers will have hardware acceleration enabled for better performance. Again, you can use a number or percentage. I used 0.3. You can use a value of 0.5 to set 50% image transparency. This could be a good CSS background image filter.
6. Brightness Image Filter
filter: brightness([<number> | <percentage>]);
Code language: CSS (css)Use this image filter (CSS) to make an image appear brighter or darker.
It accepts a number or a percentage. The behaviour is a bit different from the previous filters. A value under 100% or 1 darkens the image, while a value over 100% or 1 brightens it. If you want almost a black image, set a value near 0% (or 0). All modern browsers support this filter. Also a good CSS filter for background images.
7. Contrast Image Filter
filter: contrast([<number> | <percentage>]);
Code language: CSS (css)This CSS image filter allows you to adjust the contrast of an image.
You can both increase or decrease the contrast. Accepts a number or percentage. The behaviour is like the previous brightness filter: a value under 100% or 1 decreases the contrast of the image, while a value over 100% or 1 gives more contrast. All modern browsers support this filter.
8. Hue-rotate Image Filter
filter: hue-rotate(<angle>);
Code language: CSS (css)A CSS function that allows you to adjust and rotate the colour hue of an image.
The argument is the angle you want to use, so for example, another angle can be hue-rotate(405deg). A positive hue rotation increases the hue value, while a negative rotation decreases the hue value. In this filter, there is no maximum or minimum value. All modern browsers support this image filter (CSS).
9. Blur Image Filter
filter: blur(<length>);
Code language: CSS (css)Apply a blur effect to your images with this simple CSS image filter. Perfect for attenuating background images.
It creates an effect also known as Gaussian smoothing. The argument is the length or amount of blur you want. The higher the number, the higher the blur. Consider this CSS filter for background images. All modern browsers support this filter.
10. Drop-shadow Image Filter
filter: drop-shadow(<length>{2,3} <color>?);
Code language: CSS (css)This CSS image filter applies a drop-shadow to your images.
Works by using a blurred background and drawn below the image.
This CSS image filter is very similar to the box-shadow property but the difference is the box-shadow creates a shadow behind the entire image but the drop shadow only creates a shadow that conforms to the size of the image itself. All modern browsers support this filter.
Bonus Effect: Mix-Blend Mode
Not exactly a CSS image filter but definitely another cool CSS effect that you should know about.
This CSS property uses the mix-blend-mode keyword to allow you to set how the elements should blend together with the background. This is used mainly with text and cool backgrounds like in our example.
There are many different mix-blend-mode options to work with and not every browser supports this property over SVG elements, so always check to make sure.
Final Thoughts
It can be quite easy to implement different image effects with CSS. This article shows you how little CSS you need to create an impact on these images.
CSS Image Filters can be very useful when you use large images as backgrounds like in a large image hero slider or in a fullscreen website. They will add to the images something that makes them unique.
A lot of the time as well, you can edit the CSS to make the image filter your own, try it out and experience the CSS code and see what happens.
If you are into CSS effects or ways to beautify your websites you’ll surely be interested in fullPage.js too – A cool JavaScript library that you can use to build amazing full-screen experiences with full support for WordPress editors like Gutenberg and Elementor.
Whatever is your use case, CSS Filters can help you create something unique with little to no effort. They can even serve you as a way to quickly edit images instead of using external software. So wait no more and start using them!
References
Related articles
More articles which you may find interesting.
