Filters & Blend Modes

filter applies image-processing effects to an element. They work on anything — images, text, whole components.

Common Filters

filter: blur(4px);
filter: brightness(1.2);
filter: contrast(1.5);
filter: grayscale(50%);
filter: hue-rotate(180deg);
filter: saturate(0.5);
filter: invert(1);
filter: opacity(0.8);
filter: sepia(1);
filter: drop-shadow(0 4px 6px rgb(0 0 0 / 25%));

Combine them with spaces:

.thumbnail {
  filter: grayscale(100%) brightness(0.8);
  transition: filter 200ms ease;
}
.thumbnail:hover {
  filter: none;
}

drop-shadow vs box-shadow

box-shadow is rectangular. filter: drop-shadow() follows the element’s actual silhouette — including transparent areas of PNGs and SVGs.

.logo {
  filter: drop-shadow(0 4px 6px rgb(0 0 0 / 25%));
}

backdrop-filter — Frosted Glass

backdrop-filter applies effects to whatever’s BEHIND the element.

.glass {
  background: rgb(255 255 255 / 30%);
  backdrop-filter: blur(12px) saturate(180%);
}

The classic iOS/macOS frosted glass look. Background content shows through, blurred. Performance varies by browser — test before deploying.

mix-blend-mode — Blending Colors

.overlay-text {
  color: white;
  mix-blend-mode: difference;
}

Blends the element’s pixels with what’s behind. Modes include multiply, screen, overlay, difference, lighten, darken. Used for legibility tricks (text that flips color over photos) and design flourishes.

background-blend-mode

Same idea, but between multiple backgrounds on the same element:

.hero {
  background:
    linear-gradient(rgb(0 0 0 / 50%), rgb(0 0 0 / 50%)),
    url("/photo.jpg") center / cover;
  background-blend-mode: overlay;
}

End of Chapter

That wraps styling. Next chapter covers modern CSS — custom properties, nesting, layers, :has(), color functions, dark mode.