Cross Browser Opacity

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;


  1. DN
    Permalink to comment#

    Actually missed the IE8 opacity brouhaha. Thanks for including that!

    • abajan
      Permalink to comment#

      Yep. I didn’t know about that one either. The only issue I have with this snippet is that it’s not valid CSS.

      Nevertheless, I’m gonna use it.

    • Amr SubZero
      Permalink to comment#

      add display:inline-block will fix that. xD

    • The Right Way
      Permalink to comment#

      Che Guevara Killer!

  2. Helge-Kristoffer
    Permalink to comment#

    Usefull :) Thanks!

  3. FJ
    Permalink to comment#

    attention – sequence

    .yourselector {
    opacity: .75; /* standard: ff gt 1.5, opera, safari */
    -ms-filter: “alpha(opacity=75)”; /* ie 8 */
    filter: alpha(opacity=75); /* ie lt 7 */
    -khtml-opacity: .75; /* safari 1.x */
    -moz-opacity: .75; /* ff lt 1.5, netscape */

  4. Hilbrand Edskes
    Permalink to comment#

    If you want opacity to also work in IE8’s emulating IE7 mode, the order should be:

    -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; // first
    filter: alpha(opacity=50); // second

    If you don’t use this order, IE8 emulating IE7 doesn’t apply the opacity, although IE8 and IE7 native do.

  5. Mike
    Permalink to comment#

    What about keeping the text inside the layer normal?

    • Mike2
      Permalink to comment#

      yeah! I’m wondering how to do this too..

    • Jim
      Permalink to comment#

      If you set a parent container to an opacity less than 100%, all of its children will also be less than 100%, not because it cascades, but because the parent is dimmed. If the parent is dimmed to 75%, even if you give the child 100% opacity, it will only be 100% of 75%, which is 75%.

      What I do is just use a semi-transparent PNG as a background image for the parent, and then the children can have full opacity.

      inb4 IE6 doesn’t render 24bit pngs… Eff ie6, I’m done pandering to ie6, and enabling everyone who still uses it. The use of a semi transparent png is not going to break the site, but it will certainly affect the prettyness, which is all the more reason for people to upgrade.

    • LUkas
      Permalink to comment#

      Use rgba

  6. James
    Permalink to comment#

    You need to prevent the style from cascading… you need to wrap your text in an element with an opacity of 100.

  7. Matthew Simmons
    Permalink to comment#

    I find that I use this snippet more than any other on the site. Thanks! =D

  8. Web Design DC
    Permalink to comment#

    Is this ok for IE9?

  9. Beben Koben
    Permalink to comment#

    thanks for update coded^^

  10. asdasdasd
    Permalink to comment#

    Awesome “Submit Comment From”. Congratulations, the best i have ever find surfing in the internet world for years…

    But I have one question…
    Why all of you “webmasters”, keep asking email , hum??? If i want an answer I just put my email or even better I contact you. If not I will just SIMPLY LIE! And use one like this one:
    Take off this “required fields”. I hate this mass standardization and globalization, it’s so kitsch and so predictable, is a false sentence to evoke a mystified concept from it.

  11. Chase

    Webmasters ask for emails to help identify spam, as well as uniquely identify users. If you don’t want to enter your email, then have faith that your posts will be removed as spam, and that you really can’t contribute, because you’re not anything more than a few “asdf”s

  12. Your Mom

    I LOLD when i read the “good browsers” thing

  13. Buat Info

    good information, very helpful. Thanks..

  14. David
    Permalink to comment#

    @asdasdasd: you should view this awesome submit form in IE8.

  15. Luuk
    Permalink to comment#

    I tryed this on a PNG but then it get a black bar arround it.

  16. Adam
    Permalink to comment#

    Thanks this is a big help!

  17. Krinkle
    Permalink to comment#

    As Chris wrote here:

    Use the following anno 2011:

    .foobar {
            zoom: 1;  filter: alpha(opacity=50);
            opacity: 0.5;
  18. B
    Permalink to comment#

    All my text is invisible because it is supposed to be completely transparent against a semi-opaque background… but I can’t get the opacity to work in IE 7/8. It’s nested inside a P that’s it.

    I tried zoom:1 & Hilbrand’s fix for opacity and I still can’t get it to work. Am I doing something wrong or anyone know a code snippet to fix it?

  19. Web Design Inverness
    Permalink to comment#

    Had to laugh at the reference to ‘Good Browsers’ – I’m glad things like this don’t need to be a long article as all the answers are in your snippet, which is great. :)

  20. Andrew
    Permalink to comment#

    Thanks this has saved me hours!

  21. Pawel
    Permalink to comment#

    Good Browsers you got that one right!

  22. Sandie
    Permalink to comment#

    “it’s so kitsch and so predictable, is a false sentence to evoke a mystified concept from it” You should have been a writer! Haha.

  23. Dylan
    Permalink to comment#

    The /* Good browsers */ comment made me laugh!

    Thanks for the post, I use this snippet of code all the time when designing :)

  24. Jon Spencer
    Permalink to comment#

    Just have to say thanks for this. I continually refer to it!

  25. Eric
    Permalink to comment#

    This works great for me except for IE6 & IE7. It turns out that you need to capitalize the “A” and “O” like this:

    filter: Alpha(Opacity=50);


    • Eric
      Permalink to comment#

      my mistake! my last post was incorrect. using lower case works correctly in IE6 & IE7

      filter: alpha(opacity=50);

      Thanks again!

  26. mugaz


    This not works in IE8

    What i have to do work it in IE8 & 7

  27. mugaz


    This not works in IE8

    What i have to do work it in IE8 & 7

  28. Jack


    I have used css pie for rounded corner but one problem is that for opacity i have used the above code but i can’t see the opacity.

    if i remove csspie behavior then i see the opacity in IE8.

    so is it problematic to include csspie? i dont find any solution pls help.


  29. Umar Farooque

    Have you created all these snippets as wordpress’ dynamic pages unlike wordpress posts?

    • Jack

      No.. actually i have used this snippets in my html page and css.

  30. Reza Baiat
    Permalink to comment#

    every time I need to design a css style, I come here. thanks a lot Chris

  31. Mark III
    Permalink to comment#

    how bout -webkit-opacity? Is it for google chrome?

  32. Markavitch
    Permalink to comment#

    The is an issue with using the opacity property and images:hover. This causes the images to “jump” a pixel for a strange reason. however the following fix works (I have no idea why):

    box-shadow: #000 0em 0em 0em;

    for more information:

  33. John Brine
    Permalink to comment#

    Good Job Mr.

    Helps me a lot specially in IE issues

  34. Eugene_n
    Permalink to comment#

    there is a better way found:

    background-color: transparent;
    background-color: rgba(0,0,0,0.3);
    -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#30000000,endColorstr=#30000000)”;

    • mydhili
      Permalink to comment#

      how to measure background size in IE8 when ms-filter not worked

  35. Eugene_n
    Permalink to comment#

    sorry wrong post, that’s for transparent background only, but works without isolating ie7 8 files

  36. Muhammed Athimannil
    Permalink to comment#

    Unfortunately I’m facing black border around button in IE7 while using opacity.

    does any one have solution for this ?

  37. Rafael
    Permalink to comment#

    Thanks, perfect :D

  38. Jacob T. Nielsen
    Permalink to comment#

    Thanks a million Chris. This helped me a lot :)

  39. Aaron
    Permalink to comment#

    For IE7 you really to ensure it has a few of these as well…
    position: relative;
    z-index: 99;
    zoom: 1;
    overflow: visible;

  40. Mahsa
    Permalink to comment#

    Thanks. it was useful.

  41. naresh
    Permalink to comment#

    was really helpful

  42. Aaron Gray

    Hmm. This only seems to work when I drop the quotes around each filter.

  43. Sadhik
    Permalink to comment#

    Hi, IE9 compatibility mode the opacity not working. Is there any specific code for that…

    • Zielak
      Permalink to comment#

      Why would you use compatibility mode in IE9? Simple users don’t use that. Test on real IE8 if you want IE8 compatibility.

  44. Parvez
    Permalink to comment#

    still laughing at the comment /* Good browsers */

    . . . but that’s the truth :)

  45. Shahbaz
    Permalink to comment#

    This code is not working on IE8. Anyone tell me the perfect solution. thanks

  46. tomByrer
    Permalink to comment#
    “Firefox 3.5 and later do not support -moz-opacity”

  47. Yves

    The best place to find css tricks. IE8?! what were they thinking, MS, seriously?

  48. Dave Poore
    Permalink to comment#

    Thanks for this! Gotta love still supporting IE8! ;)

  49. Vipin
    Permalink to comment#

    need a solution for ie8 :|

  50. Kristopher
    Permalink to comment#

    Can we get this page updated or off the internet, please? This shit is ancient.

    • Chris Coyier
      Permalink to comment#

      I’ll update it to be more clear and suggest the most modern simplest way.

  51. Silviu
    Permalink to comment#

    Hi Chris, you put filter: alpha(opacity=50); under IE 5-7, but it works just fine in IE8, no need for that complicated line of code with DirectX… for IE8.

    Am I missing something? It’s true I am testing this on IE11 emulating IE8.


  52. Observer
    Permalink to comment#

    Stop supporting legacy browsers.

    Make a huge notification window when someone is trying to connect to the website through one of them, notifying him that he’s using a dinosaur-old web browser and that he should update. Even Microsoft is trying to get rid of IE!

  53. RizonBarns

    It’s so ridiculous for IE 8, not support opacity, even filter:alpha(opacity=56). And why must use -ms-filter:”progid:DXImageTransform…bla.bla.bla”?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.