Introduction
The filter CSS feature gives an element visual effects like blur or color shift. It is standard practice to utilize filters to change how borders, backgrounds, and pictures are rendered. Several functions that accomplish preset effects are part of the CSS standard. A URL to an SVG filter element can also be used to refer to an SVG filter.
Syntax
-
CSS
filter: none, blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(), and url() are some examples of filters;
-
JavaScript
object.style.filter="grayscale(100%)"
Filter Operation
| Name | Description |
| none | The default setting. says “no effects” |
| blur(px) | Gives the image a blurred look. More blur will be produced by a higher value. In the absence of a value, 0 is applied. |
| brightness(%) | Alters the image’s brightness. The picture will be entirely dark at 0%. The default setting (1) depicts the original picture. |
| contrast(%) | Alters the image’s contrast. The picture will be entirely dark at 0%. The default setting of 100% (1) represents the original picture. Results with values exceeding 100% will be more contrasted. |
| drop-shadow(h-shadow v-shadow) |
Gives the image a drop shadow effect. h-shadow – Required. specifies the horizontal shadow’s pixel value. The shadow is positioned to the left of the picture for negative values. v-shadow – Required. a pixel value is specified for the vertical shadow. When the value is negative, the shadow is above the picture. Blur – Optional. The third value has to be in pixels. gives the shadow a blurred appearance. More blur will be produced by higher values (the shadow becomes bigger and lighter). No negative values are permitted. If no value is given, 0 is applied (the edge of the shadow is sharp). Spread – Optional. The fourth value has to be in pixels. The shadow will extend and get larger with positive numbers, while the shadow will contract with negative ones. Without a value, it will be 0. Color – Optional. enhances the shadow’s hue. The color is determined by the browser if it is not provided (often black). |
| grayscale(%) | The picture is changed to grayscale. The default value, 0% (0), reflects the original picture. The picture will turn entirely grey at 100%. (used for black and white images). |
| hue- rotate(deg) | Rotation of the image’s color is applied. The number defines how many rotations of the colour circle around the image samples will take place. The default angle is 0deg, which reflects the original picture. |
| invert(%) | The samples in the picture are inverted. The default value, 0% (0), reflects the original picture. The picture will become fully reversed at 100%. |
| opacity(%) | Determines the image’s level of opacity. The term “opacity level” refers to the degree of transparency, with 0% being total transparency.100% (1) stands for the default and depicts the original picture (no transparency). |
| saturate(%) | the image is saturated. The image will be entirely desaturated at 0% (zero). The original picture is shown 100% by default. Results are super-saturated at values exceeding 100%. |
| sepia(%) | The image is saturated. The image will be entirely desaturated at 0% (zero). The original picture is shown 100% by default. Results are super-saturated at values exceeding 100%. |
| URL() | The url() function accepts the path to an XML file that defines an SVG filter and may also provide an anchor to a particular filter element. |
| initial | Makes this property’s default setting |
| inherit | Inherited from its parent element’s attribute. |
Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 33%;
height: auto;
float: left;
}
.blur {filter: blur(4px);}
.brightness {filter: brightness(0.30);}
.contrast {filter: contrast(180%);}
.grayscale {filter: grayscale(100%);}
.huerotate {filter: hue-rotate(180deg);}
.invert {filter: invert(100%);}
.opacity {filter: opacity(50%);}
.saturate {filter: saturate(7);}
.sepia {filter: sepia(100%);}
.shadow {filter: drop-shadow(8px 8px 10px green);}
</style>
</head>
<body>
<h1>filter Property Example</h1>
<img src="https://www.thecodehubs.com/wp-content/uploads/2019/11/home_article_image.jpg" width="300" height="300">
<img class="blur" src="https://www.thecodehubs.com/wp-content/uploads/2019/11/home_article_image.jpg" width="300" height="300">
<img class="brightness" src="https://www.thecodehubs.com/wp-content/uploads/2019/11/home_article_image.jpg" width="300" height="300">
<img class="contrast" src="https://www.thecodehubs.com/wp-content/uploads/2019/11/home_article_image.jpg" width="300" height="300">
<img class="grayscale" src="https://www.thecodehubs.com/wp-content/uploads/2019/11/home_article_image.jpg" width="300" height="300">
<img class="huerotate" src="https://www.thecodehubs.com/wp-content/uploads/2019/11/home_article_image.jpg" width="300" height="300">
<img class="invert" src="https://www.thecodehubs.com/wp-content/uploads/2019/11/home_article_image.jpg" width="300" height="300">
<img class="opacity" src="https://www.thecodehubs.com/wp-content/uploads/2019/11/home_article_image.jpg" width="300" height="300">
<img class="saturate" src="https://www.thecodehubs.com/wp-content/uploads/2019/11/home_article_image.jpg" width="300" height="300">
<img class="sepia" src="https://www.thecodehubs.com/wp-content/uploads/2019/11/home_article_image.jpg" width="300" height="300">
<img class="shadow" src="https://www.thecodehubs.com/wp-content/uploads/2019/11/home_article_image.jpg" width="300" height="300">
</body>
</body>
</html>
