The opacity property in CSS specifies how transparent an element is.

Basic use:

div {
  opacity: 0.5;

Opacity has a default initial value of 1 (100% opaque). Opacity is not inherited, but because the parent has opacity that applies to everything within it. You cannot make a child element less transparent than the parent, without some trickery. Values are a number from 0 to 1 representing the opacity of the channel (the "alpha" channel). When an element has a value of 0 the element is completely invisible; a value of 1 is completely opaque (solid).

Check out this Pen!

IE Compatibility

If you want opacity to work in all versions of IE, the order should be as follows:

.opaque {
  /* Theoretically for IE 8 & 9 (more valid) */
  /* ...but not required as filter works too */
  /* should come BEFORE filter */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE8

  /* This works in IE 8 & 9 too */
  /* ... but also 5, 6, 7 */
  filter: alpha(opacity=50); // IE 5-7
  /* Modern Browsers */
  opacity: 0.5;

If you don’t use this order, IE8-as-IE7 doesn’t apply the opacity, although IE8 and a pure IE7 do.

Note on Stacking Contexts

If an element with opacity and a value less than 1 is positioned, the z-index property applies as described in CSS2.1, except that the auto value is treated as 0 since a new stacking context is always created.

Opacity can be used as an alternative to the visibility property: visibility: hidden; is just like opacity: 0;.

Related Properties

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
24+ 5.1+ 19+ 12.1+ 9+ 2.1+ 3.2+


  1. User Avatar
    Ck Maurya
    Permalink to comment#

    how can u make boxes with transparent border of 10px..??
    can u please help me out..
    i am searching for the solution..

    if possible please send me a demo code..or complete example..

    Thank you in advance

    • User Avatar
      Permalink to comment#

      You could use rgba() as color of border:

      border: 10px solid rgba(255, 0, 0, 0.4);

    • User Avatar
      Permalink to comment#

      You can use padding


      .box {


  2. User Avatar
    Phil Wolstenholme
    Permalink to comment#

    Hi Chris, you’re mixing CSS and JS style comments in the first code block on this page. // foo vs /* foo */ – this might be an issue for anyone copying and pasting your example directly into their work.

    • User Avatar
      Phil Wolstenholme
      Permalink to comment#

      Just now realised you might have been using Sass for the inline // foo comments. Even so, it would be good to clarify to avoid people who aren’t using a pre-processor from using non-valid comments in vanilla CSS.

  3. User Avatar
    Permalink to comment#

    I want only to reduce the box background opacity and opacity of text in box Does not change! please help me…
    sorry if i have misspelled , i cant speak english very well! :(

    • User Avatar

      use RGB instead of HEX. A white background with 50% opacity is:
      background: rgba(255, 255, 255, 0.5);

    • User Avatar
      Permalink to comment#

      Hassan, it sounds like you’re asking how to have opacity on a box while having text show inside the box that does not have opacity on it.

      The opacity property will affect anything inside of it. So the technique I prefer is to:
      1) wrap the box (that needs opacity) within a container and give it position:relative
      2) give the box its opacity property (obviously)
      3) put the text in its own container as an adjacent sibling to the opaque box, give it position:absolute, set the top & left properties however you want to set its placement

  4. User Avatar
    Permalink to comment#

    All descendants of the element with opacity will also become transparent

    Works even if the parent element has a “visibility : hidden”.

  5. User Avatar
    damien eichhorn
    Permalink to comment#

    is there a way to have a box transparent, but the text in it, not?

    • User Avatar
      Permalink to comment#

      Opacity is not inherited, but because the parent has opacity that applies to everything within it. You cannot make a child element less transparent than the parent.

      A way to do that is like this: make your own picture with that text into it and color the background exactly with your box transparent, but instead a div you will be have an image

    • User Avatar
      Permalink to comment#

      Yeah; set a background with an alpha channel/value. Semi-transparent black would be: background-colour: rgba(0,0,0,0.5);

    • User Avatar
      Permalink to comment#

      background-color: rgba([0-255], [0-255], [0-255], [0.0-1.0]

    • User Avatar
      Permalink to comment#

      @damien, wrap the box in a container with position:relative on it, put opacity on the child box, put your text element as a sibling to the box with opacity and use position:absolute to place it over its sibling.

  6. User Avatar
    Permalink to comment#

    sir , i want to find out opacity in javascript and alert the message

  7. User Avatar
    Permalink to comment#

    also can set class=”%4″ to change Background opacity to 0.4 by colorclass script.
    refer to this website: http://colorclass.ir/

  8. User Avatar
    ankit garg
    Permalink to comment#

    Please find the solution for
    CSS opacity only to background color not the text on it?


  9. User Avatar

    gfghf h

  10. User Avatar
    Permalink to comment#

    OH, it’s a base CSS lesson

  11. User Avatar
    Permalink to comment#

    OH it’s base CSS leson

  12. User Avatar
    Varun Puravankara
    Permalink to comment#

    How to change background image’s opacity?

  13. User Avatar
    Permalink to comment#

    I have a problem that I cannot seem to get my head around, …. I am new to CSS and I am trying to implement opacity to deveral images on the page. Using this code:

    img {
        opacity: 0.5;
        filter: alpha(opacity=50); /* For IE8 and earlier */
    img:hover {
        opacity: 1.0;
        filter: alpha(opacity=100); /* For IE8 and earlier */

    I can make my images opaque until I hover over them, …. but, how do I apply this only to specific images on the page?

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