CSS - Filters & Blend Modes

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 12–15 minutes

Filters and blend modes create cinematic effects. Use responsibly and provide fallbacks.

Learning Objectives

• Apply filter (blur, brightness, contrast, drop-shadow).
• Use mix-blend-mode for overlay effects and backdrop-filter for frosted glass.

Details & Examples

.frost{ backdrop-filter: blur(8px) saturate(120%); }
.overlay{ mix-blend-mode: multiply; }
.img{ filter: grayscale(.9) contrast(1.2); }

Try it

Common Pitfalls

• backdrop-filter may be unsupported; provide a solid/semi-transparent fallback.
• Excessive filters can be expensive on low-end devices.

Checks for Understanding

1. Which property blends an element with what’s behind it?

Exercises

1. Create a frosted glass card over a busy background using backdrop-filter; include a graceful fallback.
2. Make an overlay with mix-blend-mode to darken an image; test on light/dark images.