THE WORLD'S LARGEST WEB DEVELOPER SITE

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: 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%);
}
Pineapple
Original image
Pineapple
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);
}

Pineapple
Original image
Pineapple
blur(5px)

Try it Yourself »

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