Grow your CSS skills. Land your dream job.

Last updated on:

Cross Browser Opacity

.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;
}

Comments

  1. 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.

    • add display:inline-block will fix that. xD

  2. Usefull :) Thanks!

  3. FJ
    Permalink to comment#

    attention – sequence

    .yourselector {
    background:#000;
    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. 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?

    • Permalink to comment#

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

    • 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. I find that I use this snippet more than any other on the site. Thanks! =D

  8. Is this ok for IE9?

  9. 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: dfbjhsbdjfhbsdjfhbdsjhfbsd@gmail.com
    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. 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. I LOLD when i read the “good browsers” thing

  13. good information, very helpful. Thanks..

  14. David
    Permalink to comment#

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

  15. Permalink to comment#

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

  16. Permalink to comment#

    Thanks this is a big help!

  17. Krinkle
    Permalink to comment#

    As Chris wrote here: http://css-tricks.com/64-css-transparency-settings-for-all-broswers/

    Use the following anno 2011:

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

    Thanks this has saved me hours!

  21. Permalink to comment#

    Good Browsers you got that one right!

  22. 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. 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. 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);

    Cheers!

    • 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

    -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;

    This not works in IE8

    What i have to do work it in IE8 & 7

  27. mugaz

    -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;

    This not works in IE8

    What i have to do work it in IE8 & 7

  28. Jack

    Hi,

    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.

    Thanks

  29. 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#

    Hi
    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: http://stackoverflow.com/questions/9581071/jquery-fading-images-with-html-resize-makes-them-move-sometimes

  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);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#30000000,endColorstr=#30000000);
    -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#30000000,endColorstr=#30000000)”;

  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. Thanks a million Chris. This helped me a lot :)

  39. 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. 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…

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

  44. Permalink to comment#

    still laughing at the comment /* Good browsers */

    . . . but that’s the truth :)

  45. Permalink to comment#

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

  46. tomByrer
    Permalink to comment#

    https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

    “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. Thanks for this! Gotta love still supporting IE8! ;)

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".