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. User Avatar
    Permalink to comment#

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

    • User Avatar
      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.

    • User Avatar
      Amr SubZero
      Permalink to comment#

      add display:inline-block will fix that. xD

    • User Avatar
      The Right Way
      Permalink to comment#

      Che Guevara Killer!

    • User Avatar
      Permalink to comment#

      @Amr SubZero
      I created an account only to thank you, this fixes the issue of IE where an element was not passing opacity down to its children.

  2. User Avatar
    Permalink to comment#

    Usefull :) Thanks!

  3. User Avatar
    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. User Avatar
    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. User Avatar
    Permalink to comment#

    What about keeping the text inside the layer normal?

    • User Avatar
      Permalink to comment#

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

    • User Avatar
      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.

    • User Avatar
      Permalink to comment#

      Use rgba

  6. User Avatar
    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. User Avatar
    Matthew Simmons
    Permalink to comment#

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

  8. User Avatar
    Web Design DC
    Permalink to comment#

    Is this ok for IE9?

  9. User Avatar
    Beben Koben
    Permalink to comment#

    thanks for update coded^^

  10. User Avatar
    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. User Avatar

    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. User Avatar
    Your Mom

    I LOLD when i read the “good browsers” thing

  13. User Avatar
    Buat Info

    good information, very helpful. Thanks..

  14. User Avatar
    Permalink to comment#

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

  15. User Avatar
    Permalink to comment#

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

  16. User Avatar
    Permalink to comment#

    Thanks this is a big help!

  17. User Avatar
    Permalink to comment#

    As Chris wrote here:

    Use the following anno 2011:

    .foobar {
            zoom: 1;  filter: alpha(opacity=50);
            opacity: 0.5;
  18. User Avatar
    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. User Avatar
    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. User Avatar
    Permalink to comment#

    Thanks this has saved me hours!

  21. User Avatar
    Permalink to comment#

    Good Browsers you got that one right!

  22. User Avatar
    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. User Avatar
    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. User Avatar
    Jon Spencer
    Permalink to comment#

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

  25. User Avatar
    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);


    • User Avatar
      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. User Avatar


    This not works in IE8

    What i have to do work it in IE8 & 7

  27. User Avatar


    This not works in IE8

    What i have to do work it in IE8 & 7

  28. User Avatar


    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. User Avatar
    Umar Farooque

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

    • User Avatar

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

  30. User Avatar
    Reza Baiat
    Permalink to comment#

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

  31. User Avatar
    Mark III
    Permalink to comment#

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

  32. User Avatar
    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. User Avatar
    John Brine
    Permalink to comment#

    Good Job Mr.

    Helps me a lot specially in IE issues

  34. User Avatar
    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)”;

    • User Avatar
      Permalink to comment#

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

  35. User Avatar
    Permalink to comment#

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

  36. User Avatar
    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. User Avatar
    Permalink to comment#

    Thanks, perfect :D

  38. User Avatar
    Jacob T. Nielsen
    Permalink to comment#

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

  39. User Avatar
    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. User Avatar
    Permalink to comment#

    Thanks. it was useful.

  41. User Avatar
    Permalink to comment#

    was really helpful

  42. User Avatar
    Aaron Gray

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

  43. User Avatar
    Permalink to comment#

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

    • User Avatar
      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. User Avatar
    Permalink to comment#

    still laughing at the comment /* Good browsers */

    . . . but that’s the truth :)

  45. User Avatar
    Permalink to comment#

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

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

  47. User Avatar

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

  48. User Avatar
    Dave Poore
    Permalink to comment#

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

  49. User Avatar
    Permalink to comment#

    need a solution for ie8 :|

  50. User Avatar
    Permalink to comment#

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

    • User Avatar
      Chris Coyier
      Permalink to comment#

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

  51. User Avatar
    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. User Avatar
    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. User Avatar

    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”?

  54. User Avatar
    Permalink to comment#

    Silviu is correct… filter: alpha(opacity=50); works fine on IE8

  55. User Avatar
    Permalink to comment#


    Opacity is working fine in IE11 and Chrome but fails in IE11 – ENTERPRISE MODE. Kindly advice if any body had tried opacity for IE in enterprise mode and the issue is the background is completely grey in color which works fine in other browsers.
    have used {opacity: .3; filter: Alpha(Opacity=30)}. Kindly share a solution.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.