Grow your CSS skills. Land your dream job.

Transparency in Web Design

Published by Chris Coyier

How is it done? Let's take a gander at four different ways. Each of them handling the illusion in a different way, and each completely appropriate depending on the situation at hand.

Totally Friggin Fake It


From the Spectrum Theme website

The end result of any web design is basically an illusion anyway. You can always create your transparent effects in Photoshop or whatever other graphics editor and export flat graphics. In Photoshop, transparent effects can be created by changing a layers opacity level, fill level, or blending mode, just to name a few.

Opacity


This entire button has opacity applied to it, to emphasize that it is currently "disabled".

You can make any element transparent by using the opacity parameter of CSS.

#anything {
  opacity: 0.5;  /* 50% transparent */
}

If you need to support older browsers, see here.

Do note that all descendants of the element with opacity also become transparent. There is no way to "force" any descendant to be come any less transparent as the parent is.

RGBa / HSLa


From the Like Architects site

Using RGBa for a color value in CSS, you can set a transparency level on any color. This has the distinct advantage over opacity in that it doesn't have any affect on descendants. It is also nice in that creating faded out variations of a color is as easy as changing the final alpha value. Speaking of color variations, that is even easier to do with HSLa, and is still able to handle transparency.

#anything {
  background: rgba(0,0,0,0.5);  /* 50% transparent */
}
#anything {
  background: hsla(0,0,0,0.5);  /* 50% transparent */
}

PNG


From a Dribbble

When "Saving for web" from Photoshop, you have two choices for PNG's: PNG-8 and PNG-24. PNG-8 is like a GIF in that you can have transparency in pixels, but a pixel is either fully transparent or fully opaque, no in-between. PNG-24's, while far bigger in file size, support full alpha-transparency.

In the example above, the shadows from the content areas are from PNG-24s so that the texture in the background can change and the shadows will still be the same.

Comments

  1. cool… That’s the first I’d heard anything about HSLA being included in css3.

    • Same here. What does it stand for? And where does it originate from?

    • Hue Saturation and Lightness (and Alpha). It’s kinda awesome and I really gotta get around to doing an article on it.

    • Hue Saturation and Brightness is a favourite feature of mine in Illustrator, so I think HSLa would be great.

      That’d be great if you could write an article on it, Chris.

  2. how does likearchitects make the video background without flash?

  3. TheDoc

    Chris, your timing never ceases to amaze me – literally just doing a search about this right now, came to do a search through past articles – but no need!

    Cheers!

  4. wart_dev

    Excelent thank!!

  5. I think none of them don’t work in IE except for the first one which needs IE specific property “filter” :(

  6. Ben

    “PNG-8 is like a GIF in that you can have transparency in pixels, but a pixel is either fully transparent or fully opaque, no in-between.”

    Actually that is completely wrong. You can have alpha transparency within a PNG-8 file, however that colour/alpha combination is stored as a specific colour in your limited 256 colour pallet.

    Also photshop does not support PNG-8′s with alpha transparency. Fireworks does.

    Reference: http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/

    • Ant

      Yeah, I heard of it but completely forgot.

    • Matt White

      Yeah, this is pretty much the biggest reason to use Fireworks. The added benefit is that if you compress them as PNG-8+Alpha IE6 will render them as if they are PNG-8+Boolean, which in many cases is an acceptable fallback. Unlike PNG-24′s which render with a nasty gray background in IE6, necessitating a JS hack for IE6, which I abhor. PNG8+Alpha FTW!

    • Do you know of any good tutorials explaining this step by step process? I’ve heard there are a few steps involved to get good fireworks png-8

    • Previous sentence: When “Saving for web” from Photoshop…

      It’s a bummer Photoshop doesn’t support the PNG-8 alpha transparency thing, but it doesn’t make me wrong.

    • Yeah right. Give Ben due credit for pointing out something that you didn’t, please. If you really meant to say that Photoshop restricted PNG8, then you made a mess of it, and Ben’s comment added value to the article.

    • rainmaker

      It looks like Photoshop CS5 now supports PNG-8

    • rainmaker

      I misspoke. PS-CS5 does “support” PNG8, but it appears that it still doesn’t support alpha transparency.

    • Evan

      pngquant and pngnq can also do this png8 optimization trick… for free

      The few times I have tried I am usually not very happy with the results in ie6. The “on/off” transparency can look pretty bad sometimes.

      I have also tried using AlphaImageLoader to correct the binary transparency but that will only work for png24 not png8.

    • Jon Wolski

      You can also get a full transparency/opacity mask in the tRNS chunk with PNG8, but the mask is stored as one byte per pixel and the chunk is not compressed. It works for sufficiently small PNGs without taking up slots in your index color palette.

    • I tried this method, step by step, and it still didn’t render with alpha transparency. I know I must’ve “done something wrong” despite my belief that I followed the instructions correctly… but at the end of the day I couldn’t get alpha in IE6 so I ditched it. Even then, and especially more now with recent statistics and discussions, I simply took the approach, “IE6 users will have a slightly ugly experience. Too bad.”

    • FeralReason
      Permalink to comment#

      So, to Greg’s point, which browsers support this technique (rgba, hsla) ? Right now – probably like most folks — I use several css specs to achieve opacity settings a range of browsers. Sure would be nice to handle this with one spec !

  7. Chris, which method do you use most often?

  8. I recently shunned a client for changing up a design where the main wrapper was to be opaque.

    You have re-iterated the invaluable additions web with rgba.

    Thanks!

  9. Ant

    I am mostly using PNG’s, but last times use rgba + png fallback for simple transparent blocks. (I really should use hlsa for it, but found syntax less usable than rgba; I don’t need to animate color, anyway).

    And sometimes use «fake» (transparent block flatten with background) on small sites that will not change layout.

  10. Thanks, great article. CSS3 is amazing

    • Probably worth pointing out that only the RGBa and HSLa techniques would be considered CSS3. The others are older or don’t have anything to do with CSS =)

  11. -C-

    What does “the shadows the content areas are creating my be from PNG-24s” mean?

    • Philip Jones

      I think he meant “by me” instead of “my be.”

    • That was quite awkward, thanks for pointing that out. The point was that the shadows are part of the PNG-24 graphic itself.

  12. Thanks for the article Chris !

  13. Those are great CSS attributes used to create a truly unique interface.

  14. filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;

    • No need; Mozilla supports opacity.

    • does now. -moz-opacity: is for older versions that may still be in use (e.g., netscape navigator).

    • bill

      Or if you’re already using jQuery, use its opacity instead which takes care of all browsers.

    • justintime

      THANK YOU bill
      Much water will go under this bridge before CS3 gets any practical use….so yes, fun to read now but maybe applied in 2020.

      Nice article Chris.

    • justintime

      +S

  15. Jamie

    Nice post

  16. Nice roundup of techniques.

    Also worth noting that RGBa and HSLa can be used within CSS3 gradients to create some nice effects, so you’re not limited to just a single colour or opacity.

  17. Very helpful, thanks Chris, plus I like the jQuery cycle link in your reply to Ray.

  18. Alison

    So, maybe I’ve confused myself, but… the RGBa and HSLa options are only CSS3 options, or do they have CSS2 “equivalents”?

    Also, are the RGBa and HSLa methods just for background color, or can they be used for other color specs, like font color, border color, etc.?

    Thanks for the great article, as always!

    • there are no css2 equivalents for RGBa or HSLa.

      RGBa can be used for any property that would normally accept a RGB declaration, so yeah, pretty much anything that lets you define a color. You should use an RGB declaration first as a “fallback” for browsers that don’t support it (or, as mentioned somewhere above, a transparent png for backgrounds).

  19. I posted this on the RGBa Browser Support article, but I’ll post it again here because I found it so useful in getting RGBa to work in all browsers:

    Here’s a more in depth explanation of the IE hack for rgba transparency. There’s even a handy-dandy tool to translate the RGBaa values to hex code. Nice.

  20. Very awesome, been wondering lots of this my self. Thanks a bunch going to have to try this on some up coming websites. Keep up the good work.

  21. aker

    What about performance penalties?

    Png: Some browsers (on old computers?) tend to lag rendering (scrolling) a website with several transparencies (even if each transparency is using the same small png file).

    How many transparency layers will be rendered by the browser using each method?

    Thanks

    • My thought on that is if you absolutely need some png transparency goodness, keep it as small and simple as possible. I wouldn’t even attempt to do multiple layers unless I was just horsing around with an experimental site. If I try to get too clever on a real site that has to look good cross browser, IE usually bites me one way or the other.

      Something I recently found out while trying to work with transparent pngs in IE (Kind of a “duh” moment for me) :

      Don’t under any circumstances try to make semi transparent background out of a 1 pixel repeated png and expect it work in IE. Using the various scripting solutions for IE png support, it locks up the IE browsers something terrible. For uniform transparency of a solid color (gradients apparently work also), the RGBa route with the IE hack is money.

  22. Hah! When I read “Transparency in web design” I thought you were talking metaphorical transparency, not literal transparency. That made your first point “Totally frigging fake it” even more apt.

  23. Great guide, very informative. Thanks for sharing!

  24. Andreas Horn
    Permalink to comment#

    PNG-8 can do Alpha transparency, you have to use Fireworks for saving it.

  25. Permalink to comment#

    With transparency there could be some really nice web pages.

  26. Cool. This is what I am looking for!!

  27. deepak kaletha
    Permalink to comment#

    cool one…..

  28. Brad
    Permalink to comment#

    I’ve actually been trying to do some stuff related to this using -webkit-mask-image with -webkit-gradient so that I can apply gradients to text using only CSS (purely for experimental/personal use, not for an actual business project), but haven’t found a Firefox equivalent to -webkit-mask-image and am beginning to wonder if it just doesn’t exist yet.

  29. Css opacity is cool, but it will take a lot of time to transfer all those sliced photoshop designs from jpegs to pngs or css effects.

  30. Nice one!!! I love It☺!! Thanks for the post!

  31. Very interesting, I was working with transparent PNGs recently.

    I will try these other approaches, Thanks.

Leave a Comment

Current day month ye@r *

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