Filter Effects

CSS

CSS filter applies GPU-accelerated visual effects — blur, brightness, saturation, contrast, and hue rotation. All composable in a single property declaration, applied left to right.

Controls

blur0px

brightness100%

saturate100%

contrast100%

hue-rotate0°

filter: none;

concepts

GPU-accelerated

filter triggers compositor-layer promotion, just like transform and opacity. The browser offloads rendering to the GPU, so animating it is generally smooth even on complex elements.

order matters

Filter functions are applied left to right. blur() then brightness() is a different result from brightness() then blur() when the effects interact — the sequence is part of the effect.

backdrop-filter

backdrop-filter applies the same functions to whatever is rendered behind the element, not the element itself. This is how frosted-glass and blur-behind UI patterns work.

drop-shadow vs box-shadow

filter: drop-shadow() traces the element's actual alpha shape, including transparency and irregular edges. box-shadow always applies to the rectangular bounding box.

core pattern

/* Composable — functions apply left to right */
filter:
  blur(4px)
  brightness(120%)
  saturate(150%)
  contrast(90%)
  hue-rotate(30deg);

/* Animating filter is GPU-accelerated */
.element {
  filter: blur(0px) brightness(100%);
  transition: filter 0.3s ease;
}
.element:hover {
  filter: blur(4px) brightness(140%);
}

/* backdrop-filter for frosted glass */
.glass {
  backdrop-filter: blur(12px) brightness(0.9);
}