How TO - Add Image Effects

Learn how to add visual effects to images.

Image Filters

Try it Yourself »

CSS Filters

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

Note: The filter property is not supported in Internet Explorer, Edge 12, 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%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

Original image

grayscale(100%)

Try it Yourself »

Blur Example

Apply a blur effect to all images:

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

Original image

blur(5px)

Try it Yourself »

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