Colour and Blur

Colour and blur are the slowest properties to animate. Unlike opacity and transform, they require per-pixel calculations on every frame. Used correctly, they communicate state and depth. Used carelessly, they produce janky, dropped-frame animation.

Animating colour

Colour transitions are most appropriate for state changes on interactive elements: the hover state of a button, the active state of a navigation item, the error state of a form field. These transitions are typically short (100–200ms) and involve a single element — the performance cost is manageable. Animating colour across many elements simultaneously, or animating complex gradients, is expensive and should be avoided.

Background-colour versus box-shadow

A common requirement is a button that changes its apparent colour on hover. Animating background-colour directly works but can appear slightly different across screens due to gamma. An alternative is to use a box-shadow with a spread radius to create a coloured overlay — box-shadow: inset 0 0 0 100px rgba(0,0,0,0.1) darkens a button slightly on hover without changing its colour absolutely. This gives consistent relative darkening regardless of the button’s actual colour.

Backdrop blur

backdrop-filter: blur() creates a frosted-glass effect by blurring content behind an element. It communicates layering and depth — a modal or panel that blurs the content beneath it sits visually above the page. The cost is significant: backdrop blur is one of the most GPU-intensive CSS properties. Use it only for full-page overlays or prominent UI surfaces, not for every card or tooltip. Test performance on low-end hardware before committing to it.

Blur for focus and depth of field

filter: blur() on elements rather than their backdrop can simulate depth of field — blurring background content to focus attention on a foreground element. This technique is used in lightbox-style image viewers and full-screen focus modes. Like backdrop blur, it is expensive and should be applied to as few elements as possible.

Colour in reduced motion

Colour transitions are one of the few animation types that remain appropriate under prefers-reduced-motion, because they do not involve spatial movement. A button that changes colour on hover is safe to keep for reduced-motion users. A button that moves and scales on hover should reduce to only the colour change. Colour is the motion-safe fallback for richer interactive feedback.

The takeaway

Animate colour for state changes on interactive elements — keep durations short and element counts low. Use backdrop blur for prominent layered surfaces only, and always test on mid-range hardware. Treat colour transitions as the preferred fallback for users with reduced-motion preferences.