Opacity property of CSS

CSS provides an excellent means of adding opacity to any element with the opacity property. Opacity values must be anywhere from 0 (not visible) and 1 (completely visible). Adding opacity to an element used to be quite a chore -- lots of browser-specific CSS was required:

.opacityElement { /* 50% opacity */
 -webkit-opacity: 0.5;
 -moz-opacity: 0.5;
 filter:alpha(opacity=50);
}

Some CSS properties may need to be vendor-prefixed.

Modern browsers have implemented a very basic CSS opacity property so the browser-specific code is no longer needed:

.opacityElement { /* 50% opacity */
 opacity: 0.5;
}

Some CSS properties may need to be vendor-prefixed.

CSS opacity is great in showing and deminishing focus, and paired with CSS animations and transforms, can be eleganty displayed. Opacity is supported by all major web browsers and can be used today!