The CSS Filter Property

The Use of filter

The CSS filter property adds visual effects to images or other elements without the use of photo-editing applications such as Adobe Photoshop:

img.blurred {
    -webkit-filter: blur(10px); /* Opera, Chrome, Safari */
    filter: blur(10px);
}

You can set and animate multiple filters:

In the following sections, we will discuss each CSS filter in detail.

Note: if a filter uses percentages as values, decimal values are accepted as well (75% will be the same as 0.75).

Modifying image colors

Most of the CSS filters allow you to manipulate the color of the image. Let's review them using illustrative code examples.

brightness()

The CSS brightness() filter sets a linear multiplier to images:

img.bright {
    -webkit-filter: brightness(150%); /* Opera, Chrome, Safari */
    filter: brightness(150%);
}

Values lower than 100% make images darker. Values higher than 100% make images brighter.

contrast()

The CSS contrast() filter controls the contrast of images:

img.contrast {
    -webkit-filter: contrast(150%); /* Opera, Chrome, Safari */
    filter: contrast(150%);
}

Values under 100% lower the contrast, and those over 100% raise it.

hue-rotate()

The hue-rotate filter in CSS gives images the hue rotation effect:

img.hue {
    -webkit-filter: hue-rotate(45deg); /* Opera, Chrome, Safari */
    filter: hue-rotate(45deg);
}

The value of angle indicates the number of degrees around the color circle the input samples will be set to. The default value of 0 degrees does not change the image at all.

opacity()

The CSS opacity() filter applies a specified level of transparency to the image:

img.opacity {
    -webkit-filter: opacity(50%); /* Opera, Chrome, Safari */
    filter: opacity(50%);
}

The value of 100% leaves the original transparency of images, and 0% makes it completely transparent. You cannot use negative values.

saturate()

The CSS saturate() filter sets the intensity of colors in images:

img.saturated {
    -webkit-filter: saturate(200%); /* Opera, Chrome, Safari */
    filter: saturate(200%);
}

The value of 0% turns the image black and white. You can apply values over 100% as well, but this will result in very high color intensity. You cannot use negative values.

Converting color schemes

To change the color scheme for the image completely, you can use three CSS filters: grayscale(), sepia() and invert().

grayscale()

CSS grayscale filter creates black and white images:

img.gray {
    -webkit-filter: grayscale(20%); /* Opera, Chrome, Safari */
    filter: grayscale(20%);
}

You can control the proportion of the CSS grayscale by indicating specific percentages: 100% creates a completely grayscale image, and 0% does not change the image at all. Choose any value between these two to tone down the colors as much as you need.

sepia()

CSS sepia() filter applies a reddish-brown color to images:

img.sepia {
    -webkit-filter: sepia(80%); /* Opera, Chrome, Safari */
    filter: sepia(80%);
}

A 100% value turns images fully sepia. The filter won't work with negative values.

img.multiple-filters {
    -webkit-filter: saturate(150%) blur(5px);  /* Opera, Chrome, Safari */
    filter: saturate(150%) blur(5px);
}

invert()

The invert() CSS filter inverts the image color scheme, which means each color becomes its exact opposite. For instance, red becomes cyan, and green becomes magenta:

img.inverted {
    -webkit-filter: invert(80%); /* Opera, Chrome, Safari */
    filter: invert(80%);
}

Other visual CSS filters

blur()

The CSS blur() adds a Gaussian blur to images. You can add length values in the parentheses and indicate how many pixels will the effect blend into each other:

img.blur {
    -webkit-filter: blur(10px); /* Safari 6.0 - 9.0 */
    filter: blur(10px);
}

Note: CSS blur() does not accept percentages.

drop-shadow()

The CSS drop-shadow() filter applies a shadow effect to images:

img.shadow {
    -webkit-filter: drop-shadow(5px 5px 15px blue); /* Chrome, Safari, Opera */
    filter: drop-shadow(5px 5px 15px blue);
}

CSS drop-shadow can have five values:

• offset-x and offset-y indicate the shadow offset.
• blur-radius indicates how blurred the shadow is.
• spread-radius indicates how much space the shadow takes.
• color indicates the color of the shadow.

Applying multiple filters

You can combine several CSS filters to get even better results. To define multiple effects, you need to write them in a single statement, separating them by commas.

The following example uses both CSS blur() and brightness() :

img.multiple-filters {
    -webkit-filter: saturate(150%) blur(5px);  /* Opera, Chrome, Safari */
    filter: saturate(150%) blur(5px);
}

Animating filters

CSS filters are animatable. Therefore, you can create different combinations and transform images:

@-webkit-keyframes TRANSITION-IN {
    0% {
        -webkit-transform: scale(0.5);
        opacity: 0;
        -webkit-filter: blur(70px);
    }
    100% {
        -webkit-transform: scale(1);
        -webkit-filter: blur(0px) !important;
    }   
}

Browser support

Mobile browser support