midCSS
How do CSS Filters work and impact performance?
Updated Apr 28, 2026
Short answer
The filter property provides graphical effects like blur, brightness, contrast, and drop-shadows natively in the browser.
Deep explanation
Filters are hardware-accelerated. Unlike box-shadow, drop-shadow creates shadows that map exactly to the alpha channel of an image or element (e.g., a transparent PNG). However, stacking multiple filters or animating them heavily can degrade performance.
Real-world example
Adding a precise shadow to a transparent, irregularly shaped logo PNG without drawing a solid box behind it.
Common mistakes
- Using `filter: blur()` heavily inside a scrolling animation loop, causing severe framerate drops on mobile devices.
Follow-up questions
- What is the difference between box-shadow and filter: drop-shadow?