opacity sets how see-through an element is. The value runs from 0 (invisible) to 1 (fully visible).
index.html
HTML
<style>
div { display: inline-block; padding: 18px; background: #d94a00; color: white; margin: 4px; }
.half { opacity: 0.5; }
.faint { opacity: 0.2; }
</style>
<div>opacity: 1</div>
<div class="half">opacity: 0.5</div>
<div class="faint">opacity: 0.2</div>Opacity vs. rgba
This is the one that trips people up. opacity affects the whole element: its background, its text, its border and every child. A transparent color only affects that one color.
index.html
HTML
<style>
.bg { background: #d94a00; padding: 14px; margin-bottom: 8px; }
.a { background: rgba(0, 0, 0, 0.6); color: white; padding: 10px; }
.b { background: black; color: white; padding: 10px; opacity: 0.6; }
</style>
<div class="bg"><div class="a">rgba background: the text stays solid</div></div>
<div class="bg"><div class="b">opacity: the text fades too</div></div>If you want a see-through panel with clear text, use a transparent background color, not opacity.
Good uses for opacity
- Dim a disabled button or a card that is loading.
- Fade something in or out with a transition.
- Show an image dimmed until the visitor hovers over it.
info
Opacity creates its own layer
An element with an
opacity below 1 is drawn separately from its parent. This can change how z-index and positioned children behave, so it is a possible cause of a “why is this on top?” bug.