LearnIncrease Your Site’s Performance with Hardware-Accelerated CSS

Guil Hernandez
writes on December 10, 2012

Did you know that we can hardware-accelerate graphics-intensive CSS features by offloading them to the GPU (Graphics Processing Unit)  for better rendering performance in the browser?

Most computers these days have graphics cards suitable for hardware acceleration. Because of this, we are able to leverage GPU power for those heavier features so that our sites and applications can perform faster than is possible in browsers running on the CPU.

In this article, we’ll cover the use of CSS hardware-acceleration on desktop and mobile browsers.

Hardware-Accelerated CSS on Desktop and Mobile Browsers

Ever wondered how some CSS animations run so smoothly in the browser?

CSS animations, transforms and transitions are not automatically GPU accelerated, and instead execute from the browser’s slower software rendering engine. So what exactly forces the browser to swap to GPU mode? Many browsers provide GPU acceleration by means of certain CSS rules.

Currently, browsers like Chrome, FireFox, Safari, IE9+ and the latest version of Opera all ship with hardware acceleration; they only use it when they have an indication that a DOM element would benefit from it. With CSS, the strongest indication is that a 3D transformation is being applied to an element.

For example:

.cube {
   -webkit-transform: translate3d(250px,250px,250px)
   scale3d(0.5, 0.5, 0.5);

In some cases, you might not want a 3D transformation on the element, but still take advantage of GPU acceleration. That’s when a few simple CSS properties come in handy that trick the browser into triggering GPU acceleration.

Even though we’re not animating an element in 3D space, we can enable 3D rendering. At the very least, the transform: translateZ(0); declaration triggers GPU acceleration in modern desktop and mobile browsers. This seems to be the most effective way of triggering GPU acceleration (all vendor prefixes included):

.cube {
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
   /* Other transform properties here */

In Chrome and Safari we might see a flickering effect when using CSS transforms or animations. The following declarations can be used to fix the issue:

.cube {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;
   /* Other transform properties here */

Another method that seems to work well in WebKit-powered desktop and mobile browsers is translate3d:

.cube {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  /* Other transform properties here */

Native mobile applications also make good use of the device GPU –– that’s why they’re known to perform slightly better than Web apps. Using hardware acceleration can be especially useful on mobile devices because it helps reduce resource consumption on the device.


The methods we covered should only be used on the elements we’re animating. They might improve performance on 2D transforms, but it’s not wise to use them on everything just for the sake of hardware acceleration.

Be careful with each of these methods and only use them if you experience a true performance win. Using the GPU unnecessarily can cause significant performance issues because it increases memory use –– it will also affect the battery life on mobile devices.

Have you tried using any of these methods in your projects? If so, please share which one was the most effective and performed the best.

14 Responses to “Increase Your Site’s Performance with Hardware-Accelerated CSS”

  1. Do I need to this to every class?

  2. Jason Yang on January 27, 2017 at 3:38 pm said:

    Hey Guil

    Thanks for the informative post, and I want to ask a question.

    In one of the project I’ve worked on recently, I’m seeing some flickering issue on old Chrome (version <= 34) and some Chrome based Android native browser (Samsung, LG, Motorola… also with version <= 34) while using some CSS transform animations. Enabling GPU acceleration seems to be helpful in some cases but not for all.

    For the solution you posted, I'm wondering why we need the 'prespective: 1000;' after turning off the backface-visibility?

  3. Dominik on April 7, 2016 at 7:50 am said:

    Have in mind when you place this on a img, which will display a gif, it will get faster in some browsers. But in the native browser of Samsung Galaxy Express it will cause the .gif to stop working. So use with care.

  4. i used it on my web app and tested it on L820 windows phone 8.1 using multiple browsers. i do not see any improvements (may be minor, but nothing noticeable).

  5. Philip Paetz on October 1, 2013 at 1:47 pm said:

    this is usually due to webkit switching between subpixel- and full anti-aliasing: http://maxvoltar.com/archive/-webkit-font-smoothing

    i like to use -webkit-font-smoothing: antialiased as a default which fixes the problem for me

  6. carrie on July 26, 2013 at 1:10 am said:

    Excellent post. Yes-pay

  7. Thanks, Guil. I’ll bear that in mind.

  8. bouazza on July 5, 2013 at 12:21 pm said:

    thank a lot

  9. I hate Android on May 27, 2013 at 2:30 pm said:

    Thank you, finally I got the point, but one thing come out: on ios it is very helpfull for animations but on android based devices it’s not working even more it’s just destroy site performances. The only thing left is I hope to find an alternative method or wait till Android will one day will start work with it.

  10. Thank you Ben..Now I think I am better than the most stuednts around me..I know how to creative a App but they don’t 🙂 Bread from China

  11. Seth @ FBT on April 4, 2013 at 5:25 am said:

    Finding a comprehensive beginners guide to Android development is very hard. This post covers everything required to get started with Andriod development. Thanks a lot Ben.

Leave a Reply

You must be logged in to post a comment.

Want to learn more about CSS?

Learn how CSS allows you to apply visual styling to HTML elements with colors, fonts, layouts, and more.

Learn more