CSS <filter-function> Data Type

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

HTML

<div></div>

CSS

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));
}

Result

Editor