🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

The CSS Filter Property

Reading time 4 min
Published Aug 8, 2017
Updated Oct 1, 2019

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:

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

You can set and animate multiple filters:

Filter Description
blur() Blurs the image
brightness() Increases or decreases the brightness of the image
contrast() Increases or decreases the contrast of the image
dropshadow() Adds a shadow behind the image
grayscale() Makes the image black and white
hue-rotate() Modifies the hue of the image
invert() Inverts the colors of the image
opacity() Modifies the transparency of the image
saturate() Increases or decreases the saturation of the image
sepia() Makes the image sepia-toned

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:

Example
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:

Example
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:

Example
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:

Example
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:

Example
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().

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

grayscale()

CSS grayscale filter creates black and white images:

Example
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:

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

Example
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:

Example
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:

Example
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:

Example
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() :

Example
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:

Example
@-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

Browser image
Chrome
53+
Browser image
Edge
12+
Browser image
Firefox
35+
Browser image
IE
-
Browser image
Opera
40+
Browser image
Safari
9.1+

Mobile browser support

Browser image
Chrome
53+
Browser image
Firefox
35+
Browser image
Opera
41+
Browser image
Safari
9.3+