opacity

The opacity property in CSS specifies the transparency of an element or in technical terms the degree 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).

<div class="container">
  <h3>Opacity without child elements</h3>
  <div class="opacity100">opacity: 1</div>
  <div class="opacity90">opacity: 0.9</div>
  <div class="opacity80">opacity: 0.8</div>
  <div class="opacity70">opacity: 0.7</div>
  <div class="opacity60">opacity: 0.6</div>
  <div class="opacity50">opacity: 0.5</div>
  <div class="opacity40">opacity: 0.4</div>
  <div class="opacity30">opacity: 0.3</div>
  <div class="opacity20">opacity: 0.2</div>
  <div class="opacity10">opacity: 0.1</div>
  <div class="opacity0">opacity: 0</div>
</div>

<div class="container">
  <h3>Opacity with child elements</h3>
  <div class="opacity100">
    opacity: 1
    <p>Paragraph Element</p>
  </div>
  <div class="opacity90">
    opacity: 0.9
    <p>Paragraph Element</p>
  </div>
  <div class="opacity80">
    opacity: 0.8
    <p>Paragraph Element</p>
  </div>
  <div class="opacity70">
    opacity: 0.7
    <p>Paragraph Element</p>
  </div>
  <div class="opacity60">
    opacity: 0.6
    <p>Paragraph Element</p>
  </div>
  <div class="opacity50">
    opacity: 0.5
    <p>Paragraph Element</p>
  </div>
  <div class="opacity40">
    opacity: 0.4
    <p>Paragraph Element</p>
  </div>
  <div class="opacity30">
    opacity: 0.3
    <p>Paragraph Element</p>
  </div>
  <div class="opacity20">
    opacity: 0.2
    <p>Paragraph Element</p>
  </div>
  <div class="opacity10">
    opacity: 0.1
    <p>Paragraph Element</p>
  </div>
  <div class="opacity0">
    opacity: 0
    <p>Paragraph Element</p>
  </div>
  
  <p><small>Elements with an <code>opacity</code> value of '0' are invisible</small></p>
</div>

/* General Box Styling */
/*===========================*/

.container > div {
  display: inline-block;
  height: 100px;
  width: 100px;
  background: #d58a3c;
}


/* Begin Opacity Demo Styles */
/*===========================*/

div.opacity100 {
  opacity: 1;
}

div.opacity90 {
  opacity: 0.9;
}

div.opacity80 {
  opacity: 0.8;
}

div.opacity70 {
  opacity: 0.7;
}

div.opacity60 {
  opacity: 0.6;
}

div.opacity50 {
  opacity: 0.5;
}

div.opacity40 {
  opacity: 0.4;
}

div.opacity30 {
  opacity: 0.3;
}

div.opacity20 {
  opacity: 0.2;
}

div.opacity10 {
  opacity: 0.1;
}

div.opacity0 {
  opacity: 0;
}

* 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 opacitycan 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

• Color

Browser Support