In this tutorial, I am going to show you how can you use image filters.
CSS Image Filters are used to add visual effects like blur, brightness, saturation, contrast, and so on. Image filters are used a method called. For example: blur(), brightness() etc.
Let me tell you in advance, you can use multiple image filter effects by separating each with a space.
Syntax:
filter : blur();
filter : brightness();
filter : contrast();
filter : drop-shadow;
filter : grayscale();
filter : hue-rotate();
filter : invert();
filter : opacity();
filter : saturate();
filter : sepia();
filter : url();How to use it?
| Image Filter Functions | Syntax | Try It |
| blur() | filter : blur(px); | Try It |
| brightness() | filter : brightness(%); | Try It |
| contrast() | filter : contrast(%); | Try It |
| drop-shadow() | filter : drop-shadow(h-shadow(px) v-shadow(px) blur color); | Try It |
| grayscale() | filter : grayscale(%); | Try It |
| hue-rotate() | filter : hue-rotate(deg); | Try It |
| invert() | filter : invert(%); | Try It |
| opacity() | filter : opacity(%); | Try It |
| saturate() | filter : saturate(%); | Try It |
| sepia() | filter : sepia(%); | Try It |
| url() | filter : url(svg-url#element-id); | Try It |
You may be interested in the following topics:
- CSS Image Overlay Zoom
- CSS Image Overlay Icon
- CSS Image Overlay Title
- CSS Image Filters
- CSS Flip an Images
- CSS Image Hover Overlay Slide from the right
- CSS Image Hover Overlay Slide from the left
- CSS Image Hover Overlay Slide from the bottom
- CSS Image Hover Overlay Slide from the top
- CSS Image Hover Overlay Fade In A Box
- CSS Image Hover Overlay Fade In Text
- CSS Image Hover Overlay
- CSS Text Over an Image
- CSS Transparent Images
- CSS Center an Images
- CSS Card Images
- CSS Responsive Images
- CSS Thumbnail Images
- CSS Rounded Images
- CSS Images (All Properties)