Managing crossbrowser opacity with CSS

Sometimes you may want to change the opacity of some images with CSS.
There are different ways to do it, according to the browser you are using. In this example, we’ll see both Explorer and Firefox.


In Firefox, the style is -moz opacity: xx where xx is a number from 0 to 1, where lesser equates to more transparency (basically, it’s the alpha).

The above image should look solid in Explorer and 50% transparent in Firefox.


In Explorer, the style is filter: alpha(opacity=xx) where xx is a number between 0 and 100 (again, it’s the alpha)

The above image should look solid in Firefox and 50% transparent in Explorer.

Firefox and Explorer

To create an image with transparency both in Firefox and Explorer, you need to use both styles

This image should look 50% transparent in Explorer and in Firefox.

  • Shyam Kushwaha

    These codes are Not working in OPERA. How we can manage opacity in opera browser?

  • Opera has not yet support the opacity standard from the beginning Opera support the CSS 3 opacity, not to support its private Alpha transparent attributes

  • For opera:

  • For Opera: style=”opacity:0.5;”

    Sorry for the previous reply..