O'Reilly

CSS Opacity

By on  

CSS provides an excellent means of adding opacity to any element with the opacity property. Opacity values must be anywhere from 0 (not visible) and 1 (completely visible). Adding opacity to an element used to be quite a chore -- lots of browser-specific CSS was required:

.opacityElement { /* 50% opacity */
	-webkit-opacity: 0.5;
	-moz-opacity: 0.5;
	filter:alpha(opacity=50);
}

Modern browsers have implemented a very basic CSS opacity property so the browser-specific code is no longer needed:

.opacityElement { /* 50% opacity */
	opacity: 0.5;
}

CSS opacity is great in showing and deminishing focus, and paired with CSS animations and transforms, can be eleganty displayed. Opacity is supported by all major web browsers and can be used today!

Track.js Error Reporting

Recent Features

  • 9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

  • CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

Incredible Demos

  • Create Twitter-Style Dropdowns Using jQuery

    Twitter does some great stuff with JavaScript. What I really appreciate about what they do is that there aren't any epic JS functionalities -- they're all simple touches. One of those simple touches is the "Login" dropdown on their homepage. I've taken...

  • CSS Scoped Styles

    There are plenty of awesome new attributes we've gotten during the HTML5 revolution:  placeholder, download, hidden, and more.  Each of these attributes provides us a different level of control over an element on the page, but there's a new element attribute that allows...

Discussion

  1. The only drawback with CSS opacity is that the text inside the div is blurred as well. Adding more opacity to the text inside the dic container do not solve the problem.

    css-tricks.com doucmented this issue and found a solution to this problem.

  2. For IE 8 that code needs to be changed to:

    .show-50 { -moz-opacity:.50; -ms-filter:"alpha(opacity=50)"; filter:alpha(opacity=50); opacity:.50; } 
    

    And to support old 1.x versions of Safari:

    .show-50 { -khtml-opacity:.50; -moz-opacity:.50; -ms-filter:"alpha(opacity=50)"; filter:alpha(opacity=50); opacity:.50; } 
    

    See http://blogs.msdn.com/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx

  3. Thank you very much! :)

  4. Thanks. Helped a lot ;)

  5. Pierce O' Broin

    Thanks for the suggestion but this rule can BREAK IE. I used it in conjunction with a large amount of javascript (and jquery) and it apparently caused a memory leak. BEWARE!!!!

  6. So, how exactly do I use this?

    .show-50 – How can I apply this to specific tags? If I change it to .opaque-text {css here} will it work, or does that .show-50 part make it work?

  7. Rich, the .show-50 is simply the class name, you can change this to whatever suits you. To implement this you’d use the following HTML:

    <div class=”show-50″>Content</div>

    Where “Content” is whatever you want in the container. If you changed the CSS to .opaque-text, you’d simply use:

    <div class=”opaque-text”>Content</div>

  8. heiy…it’s work for in all my testing browsers (firefox, IE:using IETester,opera,safari windows and chrome). thanx david! :)

  9. This is pretty well documented and used often. It’s a cool feature that deserves attention, but calling it “overlooked for quite some time” is stretching too far in my opinion.

  10. Neat, but does not comply to standards. Using a semi-transparent 1×1 px gif and a little absolute positioning does the trick for me :)

  11. Just tried this on a website i’m building

    It worked fine in mozilla firefox, chrome and safari and all varients of IE

    However the text inside the container that has opacity also has opacity which is unwanted

    Whats more, in IE the clear type effect is remove

    It would be good if you had a solution that also tackled that :)

  12. oneofthem

    @Search Engine Optimisation:

    Whatever is inside the container, just select it with css and set the opacity to 1.0

  13. IH8DIVS

    If you want text to appear and make an image transparent use the above mentioned style in the img tag and not in a surrounding div tag

    Content Text Goes Here.

    That should take care of your text problems inside the div

  14. IH8DIVS

    ok that didnt show up.. lets try this…just take teh spaces out.

    If you want text to appear and make an image transparent use the above mentioned style in the img tag and not in a surrounding div tag

    Content Text Goes Here

  15. IH8DIVS

    You could also write the style in your style sheet and add the class to the img tag
    [img src=’name.ext’ class=’show-50′ border=’0′ alt=’tool_tip’]

  16. @Tony: Semi-transparent 1×1 gif? Gif does not support alpha transparency. You have to specify which colors will be transparent. Can you provide more insight on how you make a div look dimmed with a gif?

  17. Arthur

    @Tony: Too bad gifs only support boolean transparency.

  18. Arthur

    @Juan Mendes: He’s likely mistaking it for a png, which does work—except for our buddy IE6. But its likely you’d already got a png fix going on so it should be too tricky.

  19. Doug

    @Tony: Not sure how you’re achieving this but due to the matting on GIFs you cannot achieve alpha transparency. The only way you can achieve true transparency in a fully rendered image is by using 24bit PNG files however this is not support by IE6 (as usual!) without using the (well documented) IE PNG transparency behaviour hack which uses all sorts of gubbings like CSS and javascript… which, if memory serves, also isn’t standards compliant! :)

  20. Tomás

    @Tony: That only works for backgrounds, and it must be a png, because there aren’t semi-transparent gif’s.
    If you want to make the text or the images transparent, how do you do it?

    You’re right, it doesn’t comply to standards… =(

  21. This code works fine for IE8

  22. how can we solve browser compatibility on css in the ei tester

  23. Brad

    Setting a background color using rgba is another good solution as it won’t affect children.

  24. Also, if you use opacity for a drop down it may be invisible, but the links still work :(

  25. Someones may encounter with background transparency due to affecting child elements. I found this solution, it may be useful.

    http://mron.us/web-development/css3/css-background-transparency-without-affecting-child-elements

  26. input type=”file” do not work!!

  27. Happy New Year,

    Having some trouble with my site…did all the adjustments with opacity but on I.E. 7 and older it seems Ok but on the newer ones the navigation hover is darkened…any suggestions? http://www.exerciserx.net

    Sincerely,
    Craig M

  28. I have a problem occured in IE version 6 and lesser version filter gray color is not happen in this following code so help me the exact code

    div.grayscale {
        filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */
        filter: gray; /* IE6-9 */
    	opacity: 0.5;
    	-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    }
    
  29. Sam

    LoL
    All this dancing to support non-compliant M$ browsers.
    Solution?
    Write code to the standard.
    Tell complainers to complain to their browser manufacturer or switch to a standards-compliant browser.
    Bwah ha ha.

  30. If you want the background to be transparent and the text or child elements opaque, use rgba background color instead of opacity.

    Because rgba background color is kind of new, you can use a semi-transparent PNG as a fallback. As Doug already said transparent PNGs are not supported by IE6. Anyway you can create transparent PNG pixel online. See: http://px64.net

    Cheers

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • OSCON Portland:  Conference  Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

  • Follow Redirects with cURL

    I love playing around with cURL. There's something about loading websites via command line that makes me feel like some type of smug hacker, just like tweeting from command line does. I recently cURL'd the Google homepage and saw the following: I found it weird that Google...

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • GSAP + SVG For Power Users: Motion Along A Path

    Now that the GreenSock API is picking up steam, there are many tutorials and Getting Started guides out there to provide good introductions to the library, not to mention GreenSock’s own Forum and Documentation. This article isn’t intended for beginners, but rather a...