opacity

Writing the value

Use a number from 0 to 1 or a percentage from 0% to 100%. Values outside the range are not errors; they are clamped to 0 or 1. The initial value is 1.

Children fade too

opacity fades the whole element after it is drawn. Setting opacity: 1 on a child cannot make it more opaque than its parent. To fade only the background, put the transparency in the color instead, as in background-color: #ffffff80.

Watch out

• Any value below 1 makes the element a new stacking context, which can change how z-index behaves.
• An element with opacity: 0 is invisible but still takes up space and still receives clicks and focus. Use visibility: hidden or display: none when it shouldn’t be interactive either.