Widely available Effective for controlled visual effects, but easy to overuse in ways that reduce clarity.

filter

The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

Several functions, such as blur() and contrast(), are available to help you achieve predefined effects.

VisualEffectsImages

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
filter
53
12
35
9.1
53
9.3
blur
18
12
35
6
53
6
brightness
18
12
35
6
53
6
contrast
18
12
35
6
53
6
drop-shadow
18
12
35
6
53
6
grayscale
18
12
35
6
53
6
hue-rotate
18
12
35
6
53
6
invert
18
12
35
6
53
6
opacity
18
12
35
6
53
6
saturate
18
12
35
6
53
6
sepia
18
12
35
6
53
6
Other
css.types.filter-function

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.
18
12
35
6
53
6
CSS type
blur

The blur() CSS function applies a Gaussian blur to the input image. Its result is a filter-function.
18
12
35
6
53
6
brightness

The brightness() CSS filter-function applies a linear multiplier value on an element or an input image, making the image appear brighter or darker.
18
12
35
6
53
6
contrast

The contrast() CSS function adjusts the contrast of the input image. Its result is a filter-function.
18
12
35
6
53
6
drop-shadow

The drop-shadow() CSS function applies a drop shadow effect to the input image. Its result is a filter-function.
18
12
35
6
53
6
grayscale

The grayscale() CSS function converts the input image to grayscale. Its result is a filter-function.
18
12
35
6
53
6
hue-rotate

The hue-rotate() CSS function rotates the hue of an element and its contents. Its result is a filter-function.
18
12
35
6
53
6
invert

The invert() CSS function inverts the color samples in the input image. Its result is a filter-function.
18
12
35
6
53
6
opacity

The opacity() CSS function applies transparency to the samples in the input image. Its result is a filter-function.
18
12
35
6
53
6
saturate

The saturate() CSS function super-saturates or desaturates the input image. Its result is a filter-function.
18
12
35
6
53
6
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.
18
12
35
6
53
6
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (12)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (49)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (6)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (6)
Notes 1 item(s)
Implementation note
  • In Chrome 18 to 19, the `saturate()` function only takes integers instead of decimal or percentage values. From Chrome 20, this bug is fixed.

Syntax

CSS 
.blurred {
  filter: blur(4px);
}

.grayscale-hover img {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.grayscale-hover img:hover {
  filter: grayscale(0%);
}

.multi-filter {
  filter: contrast(1.2) brightness(1.1) saturate(1.3);
}

Live demo

Blur(or)

CSS filter (blur, brightness, contrast, etc.) Blur(or) demo.

PreviewFullscreen

Grayscale(hover in exclude)

CSS filter (blur, brightness, contrast, etc.) Grayscale(hover in exclude) demo.

PreviewFullscreen

compositefilter

CSS filter (blur, brightness, contrast, etc.) compositefilter demo.

PreviewFullscreen

Use cases

  • Background de-emphasis

    Blur or dim background imagery behind overlays so foreground content becomes clearer.

  • Media styling

    Adjust tone or emphasis on images and icons without editing the source asset.

Cautions

  • Blur and contrast changes can reduce legibility if applied to content-bearing elements.
  • Heavy filter effects may affect performance on large or animated elements.

Accessibility

  • Do not rely on filtered imagery as the only way to distinguish content states or convey meaning.

Related links