Scroll performance for big, crazy gradients

When your designer drops a gradient-rich design in your lap you may not be 100% sure how to implement all of those groovy gradients. When working through the best way to make the ones we currently have in place on this site, it took a bit of doing to get them to a) look great across all versions of browsers (sorting out mask-composite: source-in in pre-16 Safari was quite a treat) and b) not cause browser scrolling issues when used copiously.

So here are just a few notes that helped us solve our gradient performance issues:

Use translate3d for the GPU performance kick, but not for positioning. position: absolute + top,right,bottom,left: whatever is still the most performant way to accomplish this, when combined with translate3d(0,0,0).

The export you get from Figma is a good start, but it will only give you basic properties like border-radius, background, mix-blend-mode and filter. It will not be aware of any additional gradients or layer effects from other parts of your design that may impact the design visually. You very well may need use of mask-composite' / '-webkit-mask-composite and mask-image / -webkit-mask-image to accomplish the final effect, as we did.

The other thing to watch is that if you combine gradients with a lot of opacity-altered text, it can end up being too much for many machines to handle. So the question here is: how important is your 80% opacity text to the design?

Keep the above in mind and you will have avoided most of the gradient footguns.