What are CSS filters and blend modes

Short answer

CSS filters apply graphical effects like blur and grayscale to elements. Blend modes determine how an element's content blends with its background using mix-blend-mode.

How it works

Filters modify the rendered image of an element before it is composited. Blend modes control the color math between overlapping layers.

Example

.image {
  filter: brightness(1.2) contrast(1.1) saturate(0.8);
}

.overlay {
  mix-blend-mode: multiply;
  background: rgba(255, 0, 0, 0.5);
}

Tips

• Filters are GPU-accelerated but can be expensive on large areas.
• Use backdrop-filter to blur content behind an element.
• Test blend modes across browsers; some modes are unsupported in older versions.