Chapter 36: Effects & Filters
CSS Effects & Filters today — one of the most fun and visually powerful parts of modern CSS.
These properties let you apply photoshop-like effects directly in the browser: blur, brightness, contrast, drop shadows, hue rotation, saturation changes, sepia tones, and even combinations of them — all without any images editing software or JavaScript.
They are especially loved in 2025–2026 because:
- They are GPU-accelerated → very smooth even on mobile
- They animate beautifully with transition and @keyframes
- They work on any element (images, videos, divs, text, backgrounds…)
- They help create glassmorphism, neumorphism, duotone, hover glow, frosted glass, image hover zoom-blur, etc.
Let’s go deep — step by step — like I’m sitting next to you showing everything live in DevTools.
1. Two Main Categories
| Category | Main Property | What it affects | Most common use-cases in 2026 |
|---|---|---|---|
| Filter | filter | The whole element (including content & children) | Image effects, glass/blur cards, hover states, duotone |
| Backdrop-filter | backdrop-filter | Only what is behind the element | Frosted glass / blur background effect (very trendy) |
2. The Most Important filter Functions (Daily Used)
You can combine many of them in one line:
CSS
|
0 1 2 3 4 5 6 |
filter: blur(8px) brightness(0.9) contrast(1.2) saturate(1.4) hue-rotate(20deg); |
| Function | Syntax Example | What it does | Typical Values | Common 2026 Use-case |
|---|---|---|---|---|
| blur() | blur(0–20px) | Gaussian blur (soft focus) | 4px, 8px, 12px | Frosted glass, loading placeholders, hover blur |
| brightness() | brightness(0–∞) | 0 = black, 1 = normal, >1 = brighter | 0.7–1.5 | Darken/lighten images or cards on hover |
| contrast() | contrast(0–∞) | 0 = gray, 1 = normal, >1 = high contrast | 1.1–1.8 | Make images pop, create duotone look |
| grayscale() | grayscale(0–100%) | 0 = normal, 100% = black & white | 30%–100% | Disabled buttons, old-photo effect |
| sepia() | sepia(0–100%) | Gives vintage brown/yellow tone | 40%–80% | Retro filters, Instagram-like vintage |
| hue-rotate() | hue-rotate(0–360deg) | Rotates the color wheel | 90deg, 180deg, -30deg | Color shift on hover, theme variations |
| saturate() | saturate(0–∞) | 0 = grayscale, 1 = normal, >1 = vivid colors | 0–3 | Make images more vibrant or muted |
| invert() | invert(0–100%) | Inverts colors (black → white, red → cyan…) | 100% (dark mode trick) | Quick dark mode for images |
| drop-shadow() | drop-shadow(2px 4px 6px #0006) | Shadow only on non-transparent parts | Similar to box-shadow but shape-aware | Glow around icons, floating buttons |
| opacity() | opacity(0–1) | Same as opacity property (but can be in filter) | 0.6–0.9 | Fade images without affecting layout |
3. Backdrop-filter – The Frosted Glass King
This applies filter only to the content behind the element (like looking through frosted glass).
CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
.glass { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 16px; padding: 2rem; } |
Browser support note (2026): Almost 96–98% coverage now (Chrome, Edge, Safari, Firefox new versions). Still use -webkit- prefix for safety.
4. Real Practical Example — Modern Effects & Filters Showcase
index.html
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Effects & Filters – Webliance</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>Filters & Effects Playground</h1> <section class="gallery"> <div class="image-card"> <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800" alt="Code editor"> <div class="overlay">Hover me</div> </div> <div class="image-card glass"> <img src="https://images.unsplash.com/photo-1516321310764-9f3c9619d7d7?w=800" alt="Developer"> <div class="overlay">Frosted glass</div> </div> <div class="image-card sepia-hover"> <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800" alt="Laptop"> <div class="overlay">Sepia on hover</div> </div> </section> <section class="card-effects"> <div class="card glow-hover"> <h2>Glow on Hover</h2> <p>Drop-shadow follows shape</p> </div> <div class="card blur-text"> <h2>Blur Text Reveal</h2> <p>Hover to sharpen</p> </div> </section> </div> </body> </html> |
style.css
CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: system-ui, sans-serif; background: #0f172a; color: white; padding: 40px 20px; min-height: 100vh; } .container { max-width: 1200px; margin: 0 auto; } h1 { text-align: center; margin-bottom: 3rem; font-size: 3.5rem; } /* Gallery grid */ .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2.5rem; margin-bottom: 5rem; } .image-card { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.3); transition: all 0.4s ease; } .image-card img { width: 100%; height: 320px; object-fit: cover; transition: all 0.5s ease; } .image-card:hover img { transform: scale(1.08); } .overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: bold; opacity: 0; transition: opacity 0.4s ease; } .image-card:hover .overlay { opacity: 1; } /* Glass effect */ .glass { background: rgba(255,255,255,0.08); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(255,255,255,0.12); } /* Sepia hover */ .sepia-hover img { transition: filter 0.6s ease; } .sepia-hover:hover img { filter: sepia(80%) hue-rotate(20deg) saturate(1.4); } /* Card effects section */ .card-effects { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 2.5rem; } .card { background: #1e293b; border-radius: 16px; padding: 2.5rem; text-align: center; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .glow-hover:hover { filter: drop-shadow(0 0 30px #60a5fa); transform: translateY(-8px); } .blur-text h2 { filter: blur(4px); transition: filter 0.6s ease; } .blur-text:hover h2 { filter: blur(0); } |
5. Quick Mastery Checklist (2026)
- filter goes on the element you want to affect
- backdrop-filter only affects what is behind (needs background transparency)
- Combine filters: blur(8px) brightness(0.85) saturate(1.3)
- Almost all filter functions animate very smoothly
- Use with transition: filter 0.4s ease or transition: all 0.4s
- Performance: filters are GPU-accelerated — very smooth on modern phones
- Accessibility: avoid heavy blur on text (use sparingly)
Now go open the example, hover over everything, resize the window, and feel the magic.
Want next?
- “Advanced filter combinations & blend modes”
- “Glassmorphism deep dive (backdrop-filter tricks)”
- “Image hover zoom + blur + color shift”
- “Animated filters with @keyframes”
- “Performance & accessibility considerations”
Chai thandi ho rahi hai — fresh cup le aao, phir filters ke saath khelte hain! 🚀😄
