CSS filter Property

The filter property in CSS is used to add visual effects such as blur, saturation, etc. to HTML elements. It is most commonly used with images, backgrounds, and borders.

Using the filter property you can apply photoshop-like effects to images and backgrounds. Some of these filters include the blur effect, color shifting, drop shadows, and a few more manipulations like saturation, brightness, contrast change, etc.

These filters are applied to the element right before its rendering on the user screen.

To apply these filters to an element, the filter property takes the help of some standard built-in functions and you can apply one or more functions to an element at once.

These built-in filter functions are listed below:

• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()
• url()

Let’s discuss each filter function in detail.

The blur() Function

The blur(px) function is used to add a blur effect to the selected element. The blur value can be specified in various CSS units such as px, em, rem, etc. A higher value adds more blur effect to the element.

The default value of the blur() function is 0 which means no blur effect.

The following example adds a 3px blur effect to the cat.jpg image:

Example:

img{
   filter: blur(3px);
}

The brightness() Function

The brightness(%) function is used to adjust the brightness level of images. 100% shows the original image which is the default. 0% makes the image completely black. Values over 100% make the image brighter than its original version.

See the following example:

Example:

img{
   filter: brightness(200%);
}

The contrast() Function

The contrast(%) function is used to adjust the contrast level of images. 100% shows the original images which is the default. 0% makes the image completely black. Values over 100% add more contrast to the image.

See the following example:

Example:

img{
   filter: contrast(200%);
}

The drop-shadow() Function

The drop-shadow() function is used to add a shadow effect to the image. It accepts four parameters that help us adjust the shadow.

These parameters are as follows:

• h-offset: Required. It specifies the length of the horizontal shadow in px. Negative values are also allowed and they place the shadow to the left of the image.
• v-offset: Required. It specifies the height of the vertical shadow in px. Negative values are also allowed and they place the shadow above the image.
• blur: Optional. It is used to control the blur effect of the shadow and must be in px. A larger value adds more blur effect to the shadow. The default value is 0.
• color: Optional. It specifies the color of the shadow. If not specified the default color will be used which is black for most of the browsers.

Here is a working example:

Example:

img{
   filter: drop-shadow(10px 10px 10px grey);
}

The grayscale() Function

The grayscale(%) function is used to add a gray effect to the image. The default is 0% which specifies no amount of gray. 100% makes the image fully gray which is specifically used to make an image black and white.

See this working example:

Example:

img{
   filter: grayscale(100%);
}

The hue-rotate() Function

The hue-rotate(deg) function is used to apply hue rotation to the image. 0deg is the default value which represents the original image.

The maximum allowed value is 360deg which represents the Red color on the RGB color wheel. 120deg represents fully Green and 240deg represents fully Blue.

See the following example:

Example:

img{
   filter: hue-rotate(240deg);
}

The invert() Function

The invert(%) function allows you to invert samples in an image. 0% is default and represents the original image. 100% makes the image completely inverted.

See the following example:

Example:

img{
   filter: invert(90%);
}

The opacity() Function

The opacity(%) function is used to adjust the transparency level of images. 100% is default and represents the original image. 0% makes the image fully transparent.

Here is a working example:

Example:

img{
   filter: opacity(50%);
}

The saturate() Function

The saturate(%) function allows you to adjust the saturation level of images. 0% makes an image completely unsaturated. 100% is default and represents the original image.

Values over 100% add higher values of saturation to the images.

See the following example:

Example:

img{
   filter: saturate(400%);
}

The sepia() Function

The sepia(%) function allows you to make an image sepia. 0% is default and represents the original image. 100% is used to makes the image completely sepia.

See the following example:

Example:

img{
   filter: sepia(90%);
}

The url() Function

The url(svgpath#filter_id) function is used to apply SVG filters to the images. It takes the path of an XML file that contains an SVG filter.

You can use an anchor(# followed by filter id) to a specific filter element.

The following example adds a filter with id=”sea” to the cat.jpg image:

Example:

img{
   filter: url(#sea);
}

CSS Syntax

The syntax of the filter property is as follows:

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Property Values

The filter property accepts the following values:

General Info

Browser Support

The number in each cell of the table specifies the first version of the browser that fully supports the filter property.