Practical Differences in Opacity and Alpha in CSS3

Both Opacity and Alpha refers to the same feature: the level of transparency. However, their usage and effect is very different.

1.The “Opacity” means the transparency of an element. “RGBA” stands for Red Green Blue Alpha. RGB will set the color of an object and “Alpha” sets the level of opacity.

2. Opacity is a property. Alpha is the one of the components of RGBA.

3. Opacity affects the entire element (including child elements) on which it is applied, whereas Alpha value will affect the color and level of transparency of the object where it is applied. This can be further explained with below example.

Example:-

 If a square is made and text is written inside the square and Opacity property is applied, then depending upon the opacity values, transparency effect will be reflected on entire element i.e. both on the shape as well as text. (See Figure 1.)

                                                 Figure 1. Opacity Example

Whereas if the same square and text is made and “Alpha” effect in RGBA is applied then only square will be affected and square color will be changed depending upon the alpha values. Text will remain unaffected. (See Figure 2.)

4. The value of Opacity and Alpha can be an integer or decimal depending upon the values taken between 0-1.

VALUE	MEANING
0	Element would be fully transparent
Any value between 0 (eg. 0.5) and 1	Element would be translucent.
1	Element would be fully opaque

Learn more about HTML5 and CSS3 at ADMEC Multimedia Institute.