I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

What's The Difference Between opacity and rgba?

css / properties

Estimated reading time: 2 minutes, 16 seconds

New web developers and designers often get rgba (and its hsla equivalent) confused with opacity, using them interchangeably until they come up against a visual result that makes no sense.

This is understandable, as both opacity and the a component in rgba refer to the same quality: the level of transparency. However, their application and effect is very different:

  • one (opacity) is a property; the other is the component of the value of a color property, such as background-color, box-shadow-color, or border-color.

    Most importantly, opacity affects the entire element it is applied to, whereas rgba affects only one aspect.

opacity, can be thought of as a “fade out” effect for elements. As an example, let’s overlap two divs with absolute positioning. Both divs will have white text. The first will have a dark blue background. The div on top will have a black background, and contain an image. First, the HTML:

<div id=lower><p>There is nothing wrong with your television set. Do not attempt to adjust the picture. We are controlling the transmission. We will control the horizontal, we will control the vertical.</p></div>
<div id=upper><p><img src=the-twilight-zone.png alt="The Twilight Zone">We can change the focus to a soft blur or sharpen it to crystal clarity. For the next hour, sit quietly and we will control all that you see and hear.</p></div>

Then the CSS:

body { background: #444; }
div { width: 20em; padding: 3em; position: absolute; border: 5px double #000; color: white; }
div p { margin: 0; text-align: justify; }
div#lower { background-color: rgb(0, 0, 127);  }
div img { width: 200px; height: 150px; float: right; margin-left: 3em; margin-bottom: 3em; }
div#upper { left: 18em; top: 8em; background-color: rgba(0, 0, 0, 1);  }

rgba 50%We’ll lower the alpha value for the upper div halfway to 0. Note that the text, border and image remain unaffected by this change; the only difference, as we would expect, is to the background colour of the upper div.

Taking the alpha component all the way to 0 for background-color would mean that it would be immaterial what values we put in for red, green, or blue; the background-color would, under this condition, always be fully transparent.

div#upper { left: 17em; top: 7em; background-color: rgba(255, 255, 0, 0.5);  }

opacity 25%Let’s set background-color back to the conditions we had at the start and introduce opacity. Set to a value of 1 under our initial conditions, there will be no difference. Set to 0.25, however, produces a significant change. As you can see to the left, the entire div, including the background colour, paragraph content, border and image, is now halfway transparent. This is, obviously, a very different effect.

div#upper { left: 19em; top: 9em; background-color: rgba(0, 0, 0, 1); opacity: 0.25;  }
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.