How to Create Add Visual Effects to Images with CSS

Learn how to add visual effects to images with CSS. Dazzle your website with CSS visual effects! Unlock the secrets to enhancing images and captivating users. Elevate your design game with this step-by-step guide.

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

Blur Example

Apply a blur effect to all images:

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

#css