Cross Browser Opacity

Avatar of Chris Coyier
Chris Coyier on (Updated on )

These days, you really don’t have to worry about opacity being a difficult thing cross-browser. You just use the opacity property, like this:

.thing {
  opacity: 0.5;
}

0 is totally transparent (will not be visible at all, like visibility: hidden;) and 1 is totally opaque (default). Anything in between is partially transparent.

For historical reasons, this is how is we used to do it:

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}