filter
The filter property applies graphical effects like blur, brightness, and drop-shadow to an element.
Syntax
filter: <function>...; /* blur(), brightness(), drop-shadow() */
Examples
.thumb:hover { filter: brightness(1.1) saturate(1.2); }
.glass { filter: blur(2px); }
.logo { filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.3)); }
Output
Brightens a thumbnail on hover, blurs a panel, and adds a contour-following shadow to a transparent logo.
Notes
drop-shadow() follows the alpha shape (unlike box-shadow which uses the rectangular box). Filters create a stacking context and can be GPU-accelerated. Multiple functions apply in order.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 53 |
| firefox | 35 |
| safari | 9.1 |
| edge | 79 |