filter()

Overview

The filter() CSS function applies one or more graphic effects to a CSS image, such as a background image. You can use functions, such as blur() and drop-shadow(), alone or combined to produce different effects. For instance, background: filter(url(image.png), blur(2px)). It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.

Browser support

Syntax

.element {
  background: filter(
    url(image.png),
    blur(2px) brightness(1.2)
  );
}

Live demo

Use cases

• Use filter()

  Use filter() when the default CSS behavior is not expressive enough for the component or layout you are building.

• Handle edge cases

  Apply filter() to solve a specific styling constraint without introducing broader layout or behavior changes.

Cautions

Accessibility

• Confirm that using filter() does not make content harder to perceive, understand, or operate in assistive contexts.

Related links

• MDN Web Docs - filter()
• Can I use - filter()

Powered by web-features