/

CSS Filters: How to Manipulate Elements with the CSS `filter` Property

CSS Filters: How to Manipulate Elements with the CSS filter Property

Filters are a powerful tool in CSS that allow you to perform various operations on elements, similar to what you can achieve with photo editing software like Photoshop. By using the CSS filter property, you can apply a wide range of effects to elements. This property can be used on any element, not just images.

To apply a filter, simply use the filter property followed by the desired filter value. Here’s an example of applying a filter to an image:

1
2
3
img {
  filter: <filter-value>;
}

You have several filter values to choose from, including:

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

Each filter value is enclosed in parentheses and may require a parameter. For example, the opacity() filter takes a value between 0 and 1 or a percentage to determine the transparency of the image. 

1
2
3
img {
  filter: opacity(0.5);
}

You can also apply multiple filters simultaneously by separating them with spaces.

1
2
3
img {
  filter: opacity(0.5) blur(2px);
}

Let’s now take a deeper look at each filter and how they can be used.

blur()

The blur() filter blurs the content of an element. You can specify the blur radius by passing a value in pixels (px), ems (em), or rems (rem).

1
2
3
img {
  filter: blur(4px);
}

opacity()

The opacity() filter controls the transparency of an element. You can set a value between 0 and 1 or a percentage to determine the level of transparency.

1
2
3
img {
  filter: opacity(0.5);
}

While CSS also has an opacity property, using the filter property for opacity can provide hardware acceleration and is generally the preferred method.

drop-shadow()

The drop-shadow() filter adds a shadow behind an element. It takes a minimum of two parameters and a maximum of five.

  • offset-x: Sets the horizontal offset. Can be negative.
  • offset-y: Sets the vertical offset. Can be negative.
  • blur-radius (optional): Sets the blur radius for the shadow. Defaults to 0.
  • spread-radius (optional): Sets the spread radius.
  • color (optional): Sets the color of the shadow.

You can set the color without setting the spread or blur radius.

1
2
3
img {
  filter: drop-shadow(10px 10px 5px orange);
}
1
2
3
img {
  filter: drop-shadow(10px 10px orange);
}
1
2
3
img {
  filter: drop-shadow(10px 10px 5px 5px #333);
}

grayscale()

The grayscale() filter converts an element to grayscale. You can specify the level of grayness using a value between 0 and 1 or a percentage.

1
2
3
img {
  filter: grayscale(50%);
}

sepia()

The sepia() filter transforms an element to have a sepia color effect. You can adjust the level of sepia using a value between 0 and 1 or a percentage.

1
2
3
img {
  filter: sepia(50%);
}

invert()

The invert() filter inverts the colors of an element. You can determine the degree of inversion by specifying a value between 0 and 1 or a percentage.

1
2
3
img {
  filter: invert(50%);
}

hue-rotate()

The hue-rotate() filter allows you to rotate the hue of an element. You can specify the rotation in degrees.

1
2
3
img {
  filter: hue-rotate(90deg);
}

brightness()

The brightness() filter alters the brightness of an element. A value of 0 or 0% will make the element completely black, 1 or 100% will keep the original image, and values higher than 1 or 100% will increase brightness.

1
2
3
img {
  filter: brightness(50%);
}

contrast()

The contrast() filter adjusts the contrast of an element. A value of 0 or 0% will result in a completely gray element, 1 or 100% will maintain the original image, and values higher than 1 or 100% will increase contrast.

1
2
3
img {
  filter: contrast(150%);
}

saturate()

The saturate() filter controls the saturation of an element. A value of 0 or 0% will result in a completely grayscale element, 1 or 100% will maintain the original image, and values higher than 1 or 100% will increase saturation.

1
2
3
img {
  filter: saturate(200%);
}

url()

The url() filter allows you to apply a filter defined in an SVG file. Simply specify the location of the SVG file.

1
2
3
img {
  filter: url(filter.svg);
}

SVG filters are beyond the scope of this article, but you can find more information on Smashing Magazine if you’re interested.

Tags: CSS, CSS Filters, Web Development, Image Effects