CSS Filter Examples
Example 1: This example describes the filter property with the filter value as none.
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
img {
filter: none;
}
</style>
</head>
<body>
<div>
<img src=
"https://media.w3wiki.org/wp-content/uploads/w3wiki-25.png"
alt="Geeks image">
</div>
</body>
</html>
Output:
2. Using brightness():
It sets the brightness of the element. If the brightness is 0% then it is completely black and if the brightness is 100% then it is the same as the original. The values greater than 100% result in brighter elements.
Example: This example describes the filter property with the filter value as brightness having 100%.
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
img {
filter: brightness(10%);
}
</style>
</head>
<body>
<div>
<img src=
"https://media.w3wiki.org/wp-content/uploads/w3wiki-25.png"
alt="Geeks image">
</div>
</body>
</html>
Output:
3. Using grayscale():
It converts the element colors into black and white. The grayscale 0% indicates the original element and 100% indicates the completely grayscale element. It does not accept the negative values.
Example: This example describes the filter property with the filter value as grayscale.
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
img {
filter: grayscale(70%);
}
</style>
</head>
<body>
<div>
<img src=
"https://media.w3wiki.org/wp-content/uploads/w3wiki-25.png"
alt="Geeks image">
</div>
</body>
</html>
Output:
4. sepia():
It converts the image into the sepia image where 0% represents the original image and 100% represents completely sepia. It does not accept the negative values.
Example: This example describes the filter property with the filter value as sepia.
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
img {
filter: sepia(50);
}
</style>
</head>
<body>
<div>
<img src=
"https://media.w3wiki.org/wp-content/uploads/w3wiki-25.png"
alt="Geeks image">
</div>
</body>
</html>
Output:
CSS Filter Property
CSS filter property is used to set the visual effect of an element. This property is mostly used in image content for adjusting the image rendering, background, border, etc.
Try It:
Currently Active Property:
filter: none;
Syntax:
filter: none | blur() | brightness() | contrast() | drop-shadow() |
grayscale() |hue-rotate() | invert() | opacity() | saturate() | sepia() |
url();
Note: More than one filter can be added to the HTML element which is separated by the space.
Example: This example applies two filter functions to the image element in a webpage.
img {
filter: brightness(20%) blur(20px);
}
The filter property accepts both percentage value & decimal value.
Filter function:
| Filter Function | Description |
|---|---|
none | It is the default value and it does not apply any effect. |
| blur() | Applies a blur effect to the element. The value parameter specifies the amount of blur. |
Sets the filter to default value. | |
| brightness(value) | Adjusts the brightness of the element. The value parameter specifies the level of brightness. |
| contrast() | Adjusts the contrast of the element. The value parameter specifies the level of contrast. |
| drop-shadow() | Applies a drop shadow effect to the element. The parameters define the offset, blur radius, and color of the shadow. |
| grayscale() | Converts the element to grayscale. The value parameter specifies the percentage of grayscale to apply. |
hue-rotate() | Rotates the hue of the element. The value parameter specifies the angle of rotation. |
| invert() | Inverts the colors of the element. The value parameter specifies the percentage of inversion. |
| opacity() | Adjusts the opacity of the element. The value parameter specifies the level of opacity. |
| saturate() | Adjusts the saturation of the element. The value parameter specifies the level of saturation. |
| sepia() | Applies a sepia tone to the element. The value parameter specifies the percentage of sepia to apply. |
url() | Allows you to reference an SVG filter defined in an external file using a URL. |