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

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

  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

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".