CSS Image Filter Effects

The CSS filter property is used to add visual effects to elements.

CSS Filters

The CSS filter property is used to add visual effects (like blur and saturation) to elements.

Within the filter property, you can use the following CSS functions:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()

The CSS blur() Function

The blur() filter function applies a blur effect to an element. A larger value will create more blur.

Example

Apply different blur effects to <img> elements:

#img1 {
  filter: blur(2px);
}

#img2 {
  filter: blur(6px);
}

The CSS brightness() Function

The brightness() filter function adjusts the brightness of an element.

  • Values over 100% will provide brighter results
  • Values under 100% will provide darker results
  • 0% will make the image completely black
  • 100% is default, and represents the original image

Example

Make an image brighter and darker than the original:

#img1 {
  filter: brightness(150%);
}

#img2 {
  filter: brightness(50%);
}

The CSS contrast() Function

The contrast() filter function adjusts the contrast of an element.

  • Values over 100% increases the contrast
  • Values under 100% decreases the contrast
  • 0% will make the image completely gray
  • 100% is default, and represents the original image

Example

Increase and decrease the contrast for an image:

#img1 {
  filter: contrast(150%);
}

#img2 {
  filter: contrast(50%);
}

The CSS drop-shadow() Function

The drop-shadow() filter function applies a drop-shadow effect to an image.

Example

Add different drop-shadow effects to an image:

#img1 {
  filter: drop-shadow(8px 8px 10px gray);
}

#img2 {
  filter: drop-shadow(10px 10px 7px lightblue);
}

The CSS grayscale() Function

The grayscale() filter function converts an image to grayscale.

  • 100% (or 1) will make the image completely grayscale
  • 0% (or 0) will have no effect

Example

Set various grayscale for an image:

#img1 {
  filter: grayscale(1);
}

#img2 {
  filter: grayscale(60%);
}

#img3 {
  filter: grayscale(0.4);
}

The CSS hue-rotate() Function

The hue-rotate() filter function applies a color rotation to an element.

This function applies a hue rotation on the image. The value defines the number of degrees around the color circle the image will be adjusted. A positive hue rotation increases the hue value, while a negative rotation decreases the hue value. 0deg represents the original image.

Example

Set various color rotations for an image:

#img1 {
  filter: hue-rotate(200deg);
}

#img2 {
  filter: hue-rotate(90deg);
}

#img3 {
  filter: hue-rotate(-90deg);
}

The CSS invert() Function

The invert() filter function inverts the color of an image.

  • 100% (or 1) will make the image completely inverted
  • 0% (or 0) will have no effect

Example

Invert the colors of an image:

#img1 {
  filter: invert(0.3);
}

#img2 {
  filter: invert(70%);
}

#img3 {
  filter: invert(100%);
}

The CSS opacity() Function

The opacity() filter function applies an opacity effect to an element.

  • 100% (or 1) will have no effect
  • 50% (or 0.5) will make the element 50% transparent
  • 0% (or 0) will make the element completely transparent

Example

Set various opacity for an image:

#img1 {
  filter: opacity(80%);
}

#img2 {
  filter: opacity(50%);
}

#img3 {
  filter: opacity(0.2);
}

The CSS saturate() Function

The saturate() filter function adjusts the saturation (color intensity) of an element.

  • 0% (or 0) will make the element completely unsaturated
  • 100% (or 1) will have no effect
  • 200% (or 2) will make the element super saturated

Example

Set various saturations for an image:

#img1 {
  filter: saturate(0);
}

#img2 {
  filter: saturate(100%);
}

#img3 {
  filter: saturate(200%);
}

The CSS sepia() Function

The sepia() filter function converts an image to sepia (a warmer, more brown/yellow color).

  • 100% (or 1) will make the image completely sepia
  • 0% (or 0) will have no effect

Example

Set various sepia for an image:

#img1 {
  filter: sepia(1);
}

#img2 {
  filter: sepia(60%);
}

#img3 {
  filter: sepia(0.4);
}