1. css
  2. /properties
  3. /filter

filter

Definition

The filter property in CSS allows you to apply graphical effects such as blurring, color shifting, and transparency to an element. It can be used to modify the appearance of an element by applying a filter effect.

Examples

Blur an element:

#myElement {
  filter: blur(5px);
}

Change the brightness of an element:

#myElement {
  filter: brightness(150%);
}

Apply a grayscale effect to an element:

#myElement {
  filter: grayscale(100%);
}

Values

ValueDescription
noneNo filter is applied.
<filter-function>One or multiple functions that modify the appearance of an element. Filter functions include blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, sepia, saturate, and more.
inheritUse the value of the parent element.

Best Practices

  • Use filters sparingly and consider their impact on accessibility.
  • Be careful when using filters that modify the color of an element, as it may make it harder for color-blind users to distinguish between different parts of the content.
  • When applying multiple filter effects, order matters, as each filter is applied in the order in which it is declared.
  • Consider using CSS frameworks like Bootstrap or Foundation to manage the styling of your site, which often include built-in filter effects.
  • Make sure to provide a meaningful fallback for browsers that do not support the filter property.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes