What is the filter?
- The filter property is used to apply visual effects like blur or color shift to an element.
- To use multiple filters, we can separate each filter with a space.
This will be our boilerplate:
index.html
Different filter functions
i) none: This is the default value which specifies no effects
ii) blur(px): It is used to apply a blur effect on the image. We can set blur using numbers. like: blue(9px).
iii) contrast(%): This is used to specify contrast. Where 0% will make the image completely black & 100% represents the original image.
iv) opacity(%): Sets the opacity level for the image.
v) invert(%): This will invert the samples in the image. 0% is the default which represents the original image & 100% will make the image completely inverted.
vi) saturate(%): This filter function will saturate the image. 0% will make the image completely un-saturated & 100% is the default which represents the original image.
vii) drop-shadow(offset-x offset-y): This will apply a drop shadow effect to the image. And It is similar like box-shadow
.myImage { filter: drop-shadow(23px 43px 4px #4444df); }
viii) grayscale(%): This will convert the image to grayscale.
.myImage { filter: grayscale(53%); }
ix) hue-rotate(deg): It is used to apply a hue rotation on the image.
.myImage { filter: hue-rotate(43deg); }
x) brightness(%): As the name suggests it is used to adjust the brightness of the image. Where 0% will make the image completely black and 100% is the default and represents the original image.
.myImage { filter: brightness(53%); }
Using Filter Properties
index.html
Output:
