Hardware acceleration in CSS simply means using the power of the GPU to render a page. But most of the time the rendering is done by the CPU whereas only some portions are rendered by the GPU.
So what triggers the GPU? The following things make the GPU do work:
- When content is overlapped one over the other.
- When using CSS filters like blend modes, reflections, alpha transparency and opacity.
- Whenever 3D transformations are used.
- Wherever intense painting occurs. For example, in
Hardware acceleration is good to use if the device has enough GPU to handle it (which devices these days have in abundant). For example, if you style some content, normally it would be the CPU who will render it. But if you simply add
transform: translate3D(0,0,0); it will trigger the GPU and it will be rendered using the GPU. Using opacity and filters will to cause the GPU to come into action. But beware, if you haven’t added 3D transformations initially and you add it on some event trigger (say, mouse click), the rendering will be transferred and some flickering can occur on the screen (which would displease the user).
After all, it’s up to you how to render the page. Using the GPU consumes the device’s power so think twice when using it on some mobile device.