CSS Image filters are tools that offer developers to create cool varying visual effects on HTML elements like blur and grayscale. These filters are just like filters in the photoshop.
Filters are commonly used to render the effects on images, backgrounds and borders etc.
You can use any of the below mentioned:
Filters are commonly used to render the effects on images, backgrounds and borders etc.
You can use any of the below mentioned:
-
blur()
-
brightness()
-
contrast()
-
url()
-
drop-shadow()
-
grayscale()
-
hue-rotate()
-
invert()
-
opacity()
- sepia()
The syntax:
element {
filter: filter-function(value) | none;
}
Multiple filters can be applied using space between each function.
Single Filter being used:
grayscale() give a black and white effect on any element. Its value can vary from 0% to 100%.
img {
filter: grayscale(100%);
}
Output
Multiple filters being used:
You can also use multiple filter functions in the same line separating them with space between each other.
img {
filter: grayscale(60%) blur(2px);
}
Output
Filter Functions
To use filter functions, each functions is applied with some value. Some take values in %age and some in decimals. There are a also some functions which take values in pixels.
Below we will use all of the filter functions to this image:
1. grayscale()
filter: grayscale( %age );
This filter is provided with %age. The value 100% indicates the full grayscale effect. 0% will leave the element unchanged. You can provide it with any value between 0% to 100%. -ve values are not allowed.
2. sepia()
filter: sepia( %age );
This filter converts this image to sepia. The value provided to this filter is in %age. 0% will leave the element unchanged. You can provide it with any value between 0% to 100%. -ve values are not allowed.
3. saturate()
filter: saturate( %age );
This filter saturates the input image. %age value is provided to this filter. 0% will leave the element unchanged. You can provide it with any value between 0% to 100%. -ve values are not allowed.
This filter doesn't show too much effect like others, but you can also use this one if needed.
4. hue-rotate()
filter: hue-rotate( angle );
This filter applies hue rotation to the input image. The values is provided with some angle. Angle can be anything from 0deg to 350deg.
5. invert()
filter: invert( %age );
Inverts the samples in input image. %age value is provided to this filter. 0% will leave the element unchanged. You can provide it with any value between 0% to 100%. -ve values are not allowed.
6. opacity()
filter: opacity( %age );
Opacity function applies transparency to the samples in input image. This is the function for more developed property opacity. Its value is provided in %ages. 0% is full transparent and 100% will leave the content unchanged.
7. brightness()
filter: brightness(100%);
This filter increases/decreases the brightness of content in image. The value is provided with %age. 0% will create full darkness. 100% is the original image's brightness. If no value is provided then 100% is used as default. The values more than 100% are allowed providing the brighter results.
8. contrast()
filter: contrast(%age);
Adjusts the contrast
of the input. A value of 0% will create an image that is completely
black. A value of 100% leaves the input unchanged. Values of amount
over 100% are allowed, providing results with less contrast. If the
“amount” parameter is missing, a value of 100% is used.
9. blur()
filter: blur(3px);
Applies a Gaussian
blur to the input image. The value of ‘radius’ defines the value
of the standard deviation to the Gaussian function, or how many
pixels on the screen blend into each other, so a larger value will
create more blur. If no parameter is provided, then a value 0 is
used. The parameter is specified as a CSS length, but does not accept
percentage values.
10. drop-shadow()
filter: drop-shadow(0px 0px 10px rgba(0,0,0,.5));
Applies a drop shadow effect to the input image. A drop shadow is effectively a blurred, offset version of the input image's alpha mask drawn in a particular color, composited below the image. The function accepts a parameter of type
This function is similar to the more established box-shadow property; the difference is that with filters, some browsers provide hardware acceleration for better performance.
Muhammad Arslan Aslam
I am a Full Time Student and occasional blogger. Software Engineering student with wide experience and interest in Front-End Web Development. You can find me on my profiles listed below and can get in touch any time.
Get Free Email Updates to your Inbox!
