GPU acceleration in CSS

Summary

transform: translate3d(0,0,0) promotes layer but doesn't speed layout-bound work. Filter and backdrop-filter are GPU-heavy. Prefer transform/opacity for animations; test on low-end Android. GPU memory limits cause tab crashes on layer-heavy pages.

Code example

@keyframes slide {
  from { transform: translate3d(-100%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.gpu-slide {
  animation: slide 300ms ease-out;
  /* Avoid animating width/margin at 60fps */
}

Key points

• transform: translate3d(0,0,0) promotes layer but doesn't speed layout-bound work.
• Filter and backdrop-filter are GPU-heavy.
• Prefer transform/opacity for animations; test on low-end Android.
• GPU memory limits cause tab crashes on layer-heavy pages.

Further reading

• GPU animation
• transform

Related concepts

• Browser compositing layers
• CSS containment