Filters, Blend Modes & Visual Effects
Lesson 35 • Advanced Track
What You'll Learn
- Apply CSS filters: blur, grayscale, sepia, brightness, contrast, hue-rotate, invert
- Use mix-blend-mode for creative colour overlays on images
- Create glassmorphism with backdrop-filter and semi-transparent backgrounds
- Chain multiple filters for Instagram-style presets
- Build duotone effects combining grayscale + blend modes
💡 Real-World Analogy
CSS filter is like Instagram filters — they process what's already there. mix-blend-mode is like layering coloured acetate sheets over a photo — the colour interacts with the image underneath. backdrop-filter is like looking through frosted glass — it blurs whatever is behind the element.
Understanding CSS Filters
The filter property applies graphical effects to an element — similar to Photoshop filters. Filters are applied in the order listed, and multiple filters can be chained in a single declaration. They work on any element: images, text, divs, even videos.
Important: applying any filter (even filter: none) creates a new stacking context, which can affect z-index behaviour.
Filter Functions Reference
| Function | Range | Effect |
|---|---|---|
| blur(px) | 0 – ∞ | Gaussian blur |
| brightness(%) | 0% – ∞ | Lightens/darkens (100% = normal) |
| contrast(%) | 0% – ∞ | Adjusts contrast (100% = normal) |
| grayscale(%) | 0% – 100% | Removes colour |
| sepia(%) | 0% – 100% | Warm brown tone |
| hue-rotate(deg) | 0° – 360° | Shifts colour wheel |
| saturate(%) | 0% – ∞ | Colour intensity |
| invert(%) | 0% – 100% | Negative/inverse colours |
1. CSS Filters Gallery
Code Preview
<!DOCTYPE html>
<html><head><style>
body { font-family: system-ui, sans-serif; padding: 24px; background: #fafafa; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.filter-card { text-align: center; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.filter-card img { width: 100%; height: 140px; object-fit: cover; transition: filter 0.3s; }
.filter-card p { padding: 8px; font-family: monospace;
...2. mix-blend-mode Gallery
Code Preview
<!DOCTYPE html>
<html><head><style>
body { font-family: system-ui, sans-serif; padding: 24px; }
.blend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.blend-item { position: relative; height: 160px; border-radius: 12px; overflow: hidden; display: flex; align-items: end; padding: 12px; }
.blend-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blend-overlay { position: absolute; inset: 0; display: flex; alig
... Blend mode basics: multiply darkens (great for text overlays). screen lightens (for glow effects). overlay increases contrast. color applies the overlay's hue/saturation to the image's luminosity — perfect for tinting.
3. Glassmorphism with backdrop-filter
Code Preview
<!DOCTYPE html>
<html><head><style>
body { font-family: system-ui, sans-serif; margin: 0; }
.scene { position: relative; height: 400px; overflow: hidden; }
.scene img { width: 100%; height: 100%; object-fit: cover; }
.glass-card { position: absolute; bottom: 24px; left: 24px; right: 24px; background: rgba(255,255,255,0.15); backdrop-filter: blur(16px) saturate(1.8); -webkit-backdrop-filter: blur(16px) saturate(1.8); padding: 24px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.2); col
...4. Chained Filters & Duotone Effect
Code Preview
<!DOCTYPE html>
<html><head><style>
body { font-family: system-ui, sans-serif; padding: 24px; }
h2 { color: #1565C0; }
.chain-demo { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 16px 0; }
.chain-card { text-align: center; border-radius: 12px; overflow: hidden; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.chain-card img { width: 100%; height: 150px; object-fit: cover; transition: filter 0.5s; }
.chain-card:hover img { filter: none
...When to Use This
- Image hover effects: Grayscale-to-colour on hover for portfolio galleries
- Hero overlays: Blend modes create branded colour overlays on hero images
- Glass UI: backdrop-filter creates modern frosted glass cards and navbars
- Dark mode:
filter: brightness(0.85)dims images for dark backgrounds - Duotone branding: Grayscale + colour blend creates Spotify-style branded imagery
Common Mistakes
- Performance on mobile —
backdrop-filter: blur()is GPU-intensive. Limit to small areas (cards, navbars), not full-screen overlays. - Forgetting -webkit- prefix — Safari requires
-webkit-backdrop-filter. Always include both. - Filter order matters —
blur(5px) brightness(1.5)produces different results thanbrightness(1.5) blur(5px). Blur first = brighter blur; brightness first = sharper bright image then blurred. - Opaque backgrounds hide backdrop-filter — The element must have a semi-transparent background (rgba/hsla) for the blur to show through.
- Blend modes on text —
mix-blend-modeon text can make it unreadable against certain backgrounds. Test thoroughly. - Filters create stacking contexts — Any filter value creates a new stacking context, which can unexpectedly affect z-index ordering.
🎉 Lesson Complete
- ✅
filterapplies visual effects to elements (blur, grayscale, sepia, etc.) - ✅ Multiple filters chain in order:
filter: grayscale(100%) contrast(1.2) - ✅
mix-blend-modecontrols how layers interact (multiply, screen, overlay, color) - ✅
backdrop-filterapplies effects to the area behind a semi-transparent element - ✅ Glassmorphism =
backdrop-filter: blur() + rgba background + border - ✅ Duotone = grayscale image + colour gradient with
mix-blend-mode: color - ✅ Always include
-webkit-backdrop-filterfor Safari support - ✅ Filters create stacking contexts — be aware of z-index side effects
Sign up for free to track which lessons you've completed and get learning reminders.