animated CSS filter transition hover
CSS `filter` animations are GPU-composited when the element has an active compositing context (via `will-change`, `transform` or `opacity` different from 1). The result is a smooth 60fps animation even on modest devices. Hover effects with blur, saturation or glow are very common use cases in portfolios and image galleries.
Subtle grayscale at rest, full color on hover. Notice both functions appear in both states, in the same order.
A single drop-shadow already creates a noticeable glow. For a two-layer glow, write drop-shadow() twice manually in the same list.
Slightly warms the image without a perceptible brightness change. A good alternative to a plain zoom on article covers.
It's a property that applies graphic effects such as blur, color adjustment, saturation and shadow to an entire element. Works on images, text, icons and any HTML element.
No. `filter` affects the element and its content. `backdrop-filter` affects what is behind the element (useful for glass/blur UI effects). Both accept the same functions, but they are applied at different compositing layers.
Yes, but with more care. `backdrop-filter` is more expensive than `filter` because it needs to sample and reprocess the background pixels. In long animations or on mobile devices with large screens, it can cause frame drops. Test with the performance profiler.
The most common cause is having different functions in the two states. If the resting state uses `blur(0px)` (which the browser optimizes away as 'no filter') and the hover state uses `grayscale(100%)`, there is no matching numeric pair to interpolate, so the browser snaps between states instead of transitioning. Declare the same function, at its neutral value, in the resting state.
filter: none;CSS is generated locally in your browser.