opacity

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+

Comments

  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
      Zielak
      Permalink to comment#

      You could use rgba() as color of border:

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

    • User Avatar
      toto
      Permalink to comment#

      You can use padding

      CSS

      .box {
      padding:10px;
      }

      HTML

  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
    Hassan
    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
      onlienchen

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

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

    • User Avatar
      G Hart
      Permalink to comment#

      Gilbrizzle’s info is good as it relates to the topic of this article, which is the “opacity” attribute, but what Hassan is asking requires a simpler solution: don’t use “opacity”, but rather use RGB + “alpha” instead.

      “opacity” attribute will apply to all of the attributes of the selector where it’s defined.

      RGBA, however, only applies to the specific attribute it’s applied to and leaves the other attributes of the selector alone.

      For example:

      article {
        color: #000000; background: 
        rgba(180, 180, 180, 0.4);
      }
      

      Doing this gives a 40% level of transparency to the grey background, but the text in front of it remains black.

      There are reasons to use either solution, so it’s a matter of which is best for what you’re trying to do. I think this simpler one may be you were looking for though.

  4. User Avatar
    Anonymous
    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
      dejeme
      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
      Alastair
      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
      Cradamy
      Permalink to comment#

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

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

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

  7. User Avatar
    mostafa
    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?

    http://ankithackingtips.blogspot.com/2016/04/css-opacity-only-to-background-color.html

  9. User Avatar
    Babasaheb

    gfghf h

  10. User Avatar
    UAkiev
    Permalink to comment#

    OH, it’s a base CSS lesson

  11. User Avatar
    UAkiev
    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
    Andrew
    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?

    • User Avatar
      G Hart
      Permalink to comment#

      Hey Andrew,

      You need to create a class and call it in only on those images you wish to have the transparency.

      CSS:

      .transimage img{ [properties] }
      .transimage img:hover{ [properties] }
      

      HTML:

      div class="transimage"
      img src="" /
      /div
      

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.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag