How to apply different Image Filters in CSS

CSS has many features and properties for working with images filters, masks and other effects. The CSS filter property provides Image effects like blurring or color shifting or color changing effects on an element’s. Image filters are commonly used to adjust the colors and rendering of an image or background.

How to apply different Image Filters in CSS

Filter Effects - CSS Generator :

This online free CSS filter generator tool will help you to easily apply different css filters to images using sliders. It will also generate the necessary css code for you to use on your images. This tool allows to apply image Filter effects like photoeditor tool. The filters are shown below:

1) Blur() - Applies a blur effect to the image.

CSS

---

-webkit-filter: blur(3px);

filter: blur(3px);

2) Brightness() - Adjusts the brightness of the image from 0-100( dark - brighter).

CSS

---

-webkit-filter: brightness(1.5);

filter: brightness(1.5);

3) Contrast() - contrast is the difference in colour that makes an image distinguishable.

CSS

---

-webkit-filter: contrast(2);

filter: contrast(2);

4) Greyscale() - It convert greyscale image.

CSS

---

-webkit-filter: grayscale(0.58);

filter: grayscale(0.58);

5) Hue-rotate() - Hue in the HSB/HSL encodings of RGB between 0 - 360 that helps to change the colors of an element.

CSS

---

-webkit-filter: hue-rotate(198deg);

filter: hue-rotate(198deg);

6) Invert() - set pixel colors reversed and makes negative.

CSS

---

-webkit-filter: invert(1);

filter: invert(1);

7) Opacity() - make transparent image set visibility.

CSS

---

-webkit-filter: opacity(75%);

filter: opacity(75%);

8) Saturate() - set intensity of color in the image.

CSS

---

-webkit-filter: saturate(9.3);

filter: saturate(9.3);

9) Sepia() - convert reddish-brown color make image looks like older.

CSS

---

-webkit-filter: sepia(0.93);

filter: sepia(0.93);

10) drop-shadow() - Applies a drop shadow effect to the image.

CSS

---

-webkit-filter: drop-shadow(3px 3px 5px #000);

filter: drop-shadow(3px 3px 5px #000);

Tip: We can use multiple filters, by separating each filter with a space.

Conclusion:

I hope, this tool will help you to create amazing image filter effects for your website.

Also see Best tools for CSS.