Search code examples
cssperformancerenderingopacity

Text CSS Rendering Performance : RGBA vs HEX vs OPACITY

A designer always provides CSS using opacity rather than actual color values. Does this affect rendering performance in the browser?

Which renders faster, on an always white background, where I don't actually care about transparency.

<span>Hello</span>
  1. span {color: black; opacity: 0.7;}
  2. span {color: rgba(0, 0, 0, 0.7);}
  3. span {color: #b3b3b3;}

My gut says opacity is slower (despite being put in the GPU) as now at render time the browser has to take into account the background, so any changes will cause it to repaint the object because of this transparency, while a statically colored object will never change.

Solution

  • I've just made a simple HTML containing around 50k lines of span.

    Then I used Google performance option to check the rendering progress.

    Using span {color: black; opacity: 0.7;} :

    enter image description here

    Using span {color: rgba(0, 0, 0, 0.7);} :

    enter image description here

    And finally using span {color: #b3b3b3;} :

    enter image description here

    So, as you've guessed, using opacity is slower by a fair margin.