Motion Blur with CSS

Earlier this month, we celebrated our designer Neale for his fifth anniversary here at Rogue Amoeba. Most of Neale’s great work is easy to see in our apps and on our site, but he recently had a very cool idea that we haven’t yet found a use for. While experimenting, he hit on an idea to do a realistic motion blur effect in HTML/CSS.

I was a bit shocked to find that nobody had really attempted this before. There were some less realistic takes, but my technique more closely resembles how video compositors like After Effects achieve motion blur.

Neale decided to pitch this idea to the popular blog “CSS-Tricks”, where it was accepted for publication. Check out the full article, straightforwardly titled “How to Create a Realistic Motion Blur with CSS Transitions”, where you can see it in action. It’s a very neat trick, and one we just might see more of in the future.