CSS Filter functions

The <filter-function> 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.

blur()Blurs the image. The blur() CSS function applies a Gaussian blur to the input image. Its result is a <filter-function>.

filter: blur(4px);

brightness()Makes the image brighter or darker. The brightness() CSS function applies a linear multiplier to the input image, making it appear brighter or darker. Its result is a <filter-function>.

filter: brightness(1.75);

contrast()Increases or decreases the image's contrast. The contrast() CSS function adjusts the contrast of the input image. Its result is a <filter-function>.

filter: contrast(1.75);

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. The invert() CSS function inverts the color samples in the input image. Its result is a <filter-function>.

filter: invert(0.30);

opacity()Makes the image transparent. The opacity() CSS function applies transparency to the samples in the input image. Its result is a <filter-function>.

filter: opacity(80%);

saturate()Super-saturates or desaturates the input image.

sepia()Converts the image to sepia. The sepia() CSS function converts the input image to sepia, giving it a warmer, more yellow/brown appearance. Its result is a <filter-function>.

filter: sepia(0.20);