CSS Filters Opacity, brightness, contrast, blur in CSS
CSS Filters
The CSS filter property lets you apply graphical effects to an element. Some of the functions are:-
opacity filter:-
The opacity function sets the opacity of an image to change its transparency. 0% opacity creates a completely transparent image, whereas 100% is the original image.
Syntax:-
Its syntax is:-
< style >
element{
filter: opacity(%);
}
< /style >
brightness filter:-
The brightness(amount) function adjusts the brightness of an image, making it appear brighter or darker. A value of 0% results in an image that is completely black. A value of 100% results in an image that is unchanged.
Syntax:-
Its syntax is:-
< style >
element{
filter: brightness(%);
}
< /style >
contrast filter:-
The contrast function adjusts the contrast of the image. A value under 100% decreases the contrast, while a value over 100% increases it. A value of 0% will create an image that is completely gray, while a value of 100% leaves the image unchanged.
Syntax:-
Its syntax is:-
< style >
element{
filter: contrast(%);
}
< /style >
blur filter:-
The blur function applies a blur effect to an image. The blur function has only one parameter, radius, which defines how many pixels on the screen blend into each other.
Syntax:-
Its syntax is:-
< style >
element{
filter: blur(px);
}
< /style >
Further Explanation:-
| Filter | Description |
|---|---|
| none | Specifies no effects |
| blur(px) | Applies a blur effect to the image. |
| brightness(%) | Adjusts the brightness of the image. |
| contrast(%) | Adjusts the contrast of the image. |
| opacity(%) | Sets the opacity level for the image. |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
