Scroll performance for big, crazy gradients

Paul Grieselhuber

,

Stefano Berti

Feb 20, 2024

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.

Paul Grieselhuber

Paul Grieselhuber

Founder, President

Paul has extensive background in software development and product design. Currently he runs rendr.

S

Stefano Berti

Stefano is a product engineer at Rendr.

Book a discovery call with our product experts.

Our team of web and mobile application experts look forward to discussing your next project with you.

Book a call 👋