CSS Filter Property
The filter property in CSS is used to apply visual effects to elements, most commonly images. It is particularly useful for adjusting rendering effects such as background, border, and other visual components of the element.
Try It:
Currently Active Property:
filter: none;
Syntax
filter: none | blur() | brightness() | contrast() | drop-shadow() |
grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Note: Multiple filters can be applied to an HTML element. Filters are separated by a 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.
Common Filter Functions
| 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. |
CSS Filter Examples
Here are the examples of CSS Filter property :
Example 1 : Using CSS brightness Filter
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 10%.
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
img {
filter: brightness(10%);
}
</style>
</head>
<body>
<div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="Geeks image">
</div>
</body>
</html>
Output:
Example 2 : Using CSS blur Filter
It applies the blur effect to the element. If the blur value is not specified then it takes 0 as the default value.
Example: This example describes the filter property with the filter value as a blur for generating the blur image effect.
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
img {
filter: blur(5px);
}
</style>
</head>
<body>
<div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="Geeks image">
</div>
</body>
</html>
Output:
Example 3 : Using CSS Opacity Filter
It sets the opacity effect of the image. The 0% opacity indicates the element is completely transparent and if opacity is 100% then it indicates the original image. It doesn’t accept the negative value.
Example: This example describes the filter property where the filter value is set as opacity with 0.5.
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
img {
filter: opacity(0.5);
}
</style>
</head>
<body>
<div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="Geeks image">
</div>
</body>
</html>
Output:
Example 4: Using CSS hue-rotate Filter
It applies a hue rotation to the image. The value defines the number of degrees around the color circle the image samples will be adjusted. The default value is 0 degrees and it represents the original image.
Example: This example describes the filter property where the hue-rotate is set to 45deg.
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
img {
filter: hue-rotate(45deg);
}
</style>
</head>
<body>
<div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="Geeks image">
</div>
</body>
</html>
Output:
Example 5 : Using CSS drop-shadow Filter
It applies a drop shadow effect to the element. It accepts h-shadow, v-shadow, blur, spread, and color as values. It is not only applied to images but it can be applied to shapes as it can have the same shape as of original one. The negative values for the h-shadow & v-shadow will shift the shadow to the left of the image.
Example: This example describes the filter property where the drop-shadow effect is applied to the element.
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
img {
filter: drop-shadow(16px 18px 15px rgba(255, 0, 0, 0.5));
}
</style>
</head>
<body>
<div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="Geeks image">
</div>
</body>
</html>
Output:
Supported Browsers
The browsers supported by filter property are listed below:
- Google Chrome 5.0
- Edge 12
- Mozilla 4.0
- Safari 5.0
- Opera 11.1
CSS Filter Property – FAQs
How do you apply a filter to an image in CSS?
You can apply a filter to an image by using the filter property with effects like grayscale, brightness, or blur to change its appearance.
What is the purpose of a filter in CSS?
The purpose of the filter property is to enhance or alter the visual appearance of elements on a webpage, allowing for creative image manipulation without editing the actual image.
What is a drop shadow in CSS?
The drop-shadow() filter adds a shadow to an element, allowing you to control the shadow’s color, offset, and blur to create a more visually striking design.
How do you use two filters in CSS?
You can combine multiple filters by listing them in the filter property, separated by spaces. This allows for complex visual effects by layering filters like blur and brightness.
What are the filter characteristics in CSS?
Filters in CSS allow you to modify the visual output of elements by adjusting characteristics such as brightness, contrast, opacity, and more, either individually or combined.
