CSS Filter Property (original) (raw)

Last Updated : 11 Jul, 2025

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:

No Filter

Blured

High Bright

High Contrast

Shadowed

Grayscale

Hued

Inverted

Transparent

Saturated

Sepia

**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.
**initial 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%.

HTML `

CSS filter property
Geeks image

`

**Output:

Filter Examples 1 Using brightness

**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.

HTML `

CSS filter property
Geeks image

`

**Output:

Filter Examples Using blur

**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.

HTML `

CSS filter property
Geeks image

`

**Output:

Filter Examples Using opacity

**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.

HTML `

CSS filter property
Geeks image

`

**Output:

Filter Examples Using hue-rotate

**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.

HTML `

CSS filter property
Geeks image

`

**Output:

Filter Examples Using drop shadow

**Supported Browsers

The browsers supported by **filter property are listed below: