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

  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]

  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

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.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag