Opacity Examples

Best viewed in modern browsers.

Simple example. Background set to Black, but opacity set to 50%, yielding gray.

Opacity values range from 0 (transparent) to 1 (opaque).

Another example, this one using rgba channels instead of hex colors.

Note that rgb values run from 0 - 255.

One more example, this one using hsla (hue, saturation, lightness) instead of rgb or hex colors.

Note that hue is measured in degrees (from 0 - 360) and saturation and lightness values run from 0 - 100%.

A last example, this one using rgba channels and setting opacity to 50%, followed by a separate opacity line of 50% (yielding 25%).

In the last example (above) you will note that the opacity effects are actually additive. This might be counter-intuitive from other CSS effects you may have experienced.