How TO - Add Image Effects

Learn how to add visual effects to images.

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

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%)

Apply a blur effect to all images:

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

Original image

blur(5px)

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