How TO - Add Image Effects

Learn how to add visual effects to images.

CSS Filters

The CSS filter property adds visual effects (like blur and saturation) to an element.

Note: This property is not supported in Internet Explorer or Safari 5.1 (and earlier).

Grayscale Example

Change the color of all images to black and white (100% gray):

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

Original image

grayscale(100%)

Try it yourself »

Blur Example

Apply a blur effect to all images:

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

Original image

blur(5px)

Try it yourself »

Go to our CSS filter Property to learn more about CSS filters.