tools.junyo.dev

animated CSS filter transition hover

Animating CSS filter with transition and @keyframes: technique and best practices

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.

Continue in the tool

Open full tool

More pages for this tool

How to ensure performance in filter animations

  • For hover filter animations, add `will-change: filter` to the element in its resting state. This creates the compositing context before hover, eliminating the "first slow frame" window that causes visual glitches. Remove `will-change` when the animation is no longer needed (e.g., when exiting gallery mode).
  • Do not animate blur with very high values (>10px) on large images. The blur cost is proportional to the radius squared (Gaussian blur is O(r²)). For background blur (backdrop glass effect), prefer `backdrop-filter: blur()` which is separately optimized.

Hover effects with animated filter

Gallery: saturation on hover

Input
.gallery-item img
Expected output
.gallery-item img { filter: grayscale(0.8) brightness(0.9); transition: filter 300ms ease-out; } .gallery-item:hover img { filter: grayscale(0) brightness(1); }

Classic gallery effect: grayscale at rest, colorful on hover.

Neon glow on hover

Input
.neon-btn
Expected output
.neon-btn { filter: none; transition: filter 200ms ease; } .neon-btn:hover { filter: drop-shadow(0 0 8px rgba(61,220,151,.8)) drop-shadow(0 0 20px rgba(61,220,151,.4)); }

Glow with double drop-shadow. Works on SVG and transparent PNG.

Full tool FAQ

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.

Frequently asked questions

Are filter and backdrop-filter the same thing?

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.

Can I also animate backdrop-filter?

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.