CSS Filter

Written By: Avinash Malhotra

Updated on:

  1. Home
  2. Frontend
  3. CSS
  4. CSS Filter
  1. filter
  2. url
  3. blur
  4. contrast
  5. grayscale
  6. hue-rotate
  7. drop-shadow

CSS Filter Property

CSS Filter property is used to add filter effects to images or elements. This includes properties like url, blur, contrast, grayscale, hue-rotate and drop-shadow. Filter effects can be used on images, backgrounds or borders to add effects.

Filter Functions

  1. url
  2. blur
  3. contrast
  4. grayscale
  5. hue-rotate
  6. drop-shadow

Change Filter for image

blur

blur function is used to add blur to images or backgrounds. Default value is 0px. Blur value is in px. For example, to change blur 10px, use filter:blur(10px) in css.

Change blur of image



contrast

contrast function is used to add contrast to images or backgrounds. Default value is 1. Contrast value can be 0 to any positive number. For example, to change contrast 0, use filter:contrast(0) in css.

Change contrast of image



grayscale

grayscale function is used to add contrast to images or backgrounds. Default value is 0. grayscale value can be 0 to 1. For example, for full grayscale image, use filter:grayscale(1) in css.

Change contrast of image



hue-rotate

hue-rotate function is used to change hue rotation to images or backgrounds. Default value is 0. value can be 0 to 355 deg. For example, use filter:hue-rotate(180deg) in css.

Change hue-rotate of image



drop-shadow

drop-shadow function is used to add shadows to images. Default value is 0. For example, use filter:drop-shadow(0 0 10px) in css.

Change drop-shadow of image