Treehouse: Grow your CSS skills. Land your dream job.

opacity

Last updated on:

The opacity property in CSS specifies the transparency of an element or in technical terms the degreee in which light is allowed to travel through an object. The opacity setting is applied uniformly across the entire object and any value smaller than 1 creates a new stacking context.

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. Values are a <number> in the range 0.0 to 1.0 representing the opacity of the channel or often referred to as the alpha channel. When an element has a value of 0 the element is completely invisible whereas 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.

Noteworthy

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 where an element's opacity can be set to 0 to make the element take space, but not appear visually.

All descendants of the element with opacity will also become transparent and unfortunately there is no way to “force” any descendant to be come any less transparent as the parent is.

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

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

  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

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 in triple backtick fences like this:

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