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

    • Zielak
      Permalink to comment#

      You could use rgba() as color of border:

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

    • toto
      Permalink to comment#

      You can use padding

      CSS

      .box {
      padding:10px;
      }

      HTML

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

    • 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. 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! :(

    • onlienchen

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

  4. 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. damien eichhorn
    Permalink to comment#

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

    • 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

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

    • Cradamy
      Permalink to comment#

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

  6. vil
    Permalink to comment#

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

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

    gfghf h

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.