How to create: Add image effects

Learn how to add visual effects to images.

Image filters

Try It Yourself

CSS Filters

CSS filter Property adds visual effects to elements (such as blurring and saturation).

Note:Internet Explorer, Edge 12, or Safari 5.1 and earlier versions do not support filter Property.

Grayscale example

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

Tulip
Original image
Tulip
Grayscale (100%)
img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

Try It Yourself

Blurring example

Apply blurring effect to all images:

Tulip
Original image
Tulip
Blurring effect (5 pixels)
img {
  -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}

Try It Yourself

Related Pages

Reference Manual:CSS Filter Property