How TO - Add Image Effects
Learn how to add visual effects to images.
Image Filters
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%)
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)
Go to our CSS filter Property to learn more about CSS filters.
