 Here's something that came up on SuperCharge recently. Sometimes you need to animate a shadow on an element, but you want to keep your stuff performant. And you might think, I'll animate the box shadow, but that's bad because it causes the element to repaint every time you change it. And you can see that by switching on the paint flashing option in Chrome's DevTools. Then you might think, aha, instead I shall use the CSS blur filter, but that's also bad for performance because it's applied as a post-processing effect on the GPU, meaning it's done per frame. Since blurs are computationally expensive, they're not something we want to be doing on the fly. What you want to do instead is create a totally separate element, maybe a pseudo element, onto which you can kind of bake the shadow. You can take that element, fill it with a black background, add a box shadow, and fade it down. Then you promote it with WillChangeTransform, making it moveable with the GPU's help. Alternatively, for a slightly more flexible approach, you can use an SVG image as the box's background and use border image to line slice it. You could even use SVGs for an object tag if you want to go really out there and do something strange. Now you have a shadow that you can move, scale, and fade independently of the element it's shadowing. Win!