CSS <filter-function> Data Type

Description

The CSS data type represents a graphical effect that can change the appearance of an input image. It is used in the filter and backdrop-filter properties.

There are many different filter functions available, such as blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), and sepia(). These functions can be used to create a wide variety of effects, such as blurring an image, making it brighter or darker, changing its contrast, adding a drop shadow, converting it to grayscale, changing its hue, inverting its colors, making it transparent, or changing its saturation.

Filter functions can be combined to create even more complex effects. For example, you could use the blur() and drop-shadow() functions together to create a soft shadow effect.

Here are some examples of how to use filter functions in CSS:

/* Blur an image */
img {
  filter: blur(5px);
}

/* Make an image brighter */
img {
  filter: brightness(120%);
}

/* Increase the contrast of an image */
img {
  filter: contrast(150%);
}

/* Add a drop shadow to an image */
img {
  filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.5));
}

/* Convert an image to grayscale */
img {
  filter: grayscale(100%);
}

/* Change the hue of an image */
img {
  filter: hue-rotate(90deg);
}

Filter functions are a powerful tool for creating visually appealing and engaging web pages.

Syntax

<filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <sepia()> | <saturate()> 

Values

  • <blur()>Blurs the image.
  • <brightness()>Makes the image brighter or darker.
  • <contrast()>Increases or decreases the image's contrast.
  • <drop-shadow()>Applies a drop shadow behind the image.
  • <grayscale()>Converts the image to grayscale.
  • <hue-rotate()>Changes the overall hue of the image.
  • <invert()>Inverts the colors of the image.
  • <opacity()>Makes the image transparent.
  • <sepia()>Converts the image to sepia.
  • <saturate()>Super-saturates or desaturates the input image.

Example

<div></div>
div {
  width: 300px;
  height: 300px;
  background: url(images/sunset.jpg) no-repeat center;
  filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.5));
}

Browser Support

The following table will show you the current browser support for the CSS filter-function data type.

Desktop
Edge Chrome Firefox Opera Safari
121835156
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
533514664.4

Last updated by CSSPortal on: 7th October 2023