opacity

opacity makes a box and its rendered descendants transparent as one composited group. A child’s opacity:1 cannot restore full opacity through a translucent ancestor.

See the whole group fade

The second note uses opacity:.45, so its background, border, and text all fade. This is a visual comparison, not a model for disabling a control.

<div class="note">Opacity: 1</div>
<div class="note faded">Opacity: .45</div>

.note {
  padding: 1rem;
  margin-block: 0.5rem;
  background: #bfdbfe;
  border: 2px solid #2563eb;
}
.faded {
  opacity: 0.45;
}

Use background alpha when text should stay opaque

Only the background color is translucent. The text remains fully opaque, allowing contrast to be checked against the resulting background rather than dimming the entire component.

<div class="stage"><p class="note">Translucent background, opaque text</p></div>

.stage {
  padding: 1rem;
  background: repeating-linear-gradient(45deg, #eff6ff 0 10px, white 10px 20px);
}
.note {
  background: rgb(37 99 235 / 15%);
  padding: 1rem;
  color: #172554;
}

Values and side effects

The initial value is 1 and the property is not inherited. Numbers from 0 to 1 and percentages from 0% to 100% describe transparency. Out-of-range values are clamped. An opacity below 1 creates a stacking context.

Opacity:0 makes pixels invisible but does not remove layout space, pointer targeting, keyboard focus, or accessibility exposure. A transparent button can still activate. To disable a supported form control, use its disabled attribute and explain the reason; changing opacity or cursor alone is insufficient.

Keep content readable

Lower opacity can reduce text contrast. Use a color with alpha when only the background needs transparency. Use visibility or display when the content should actually be hidden, taking focus into account.

For animation, provide a reduced-motion alternative and verify newer discrete-transition features separately. Learn z-index, color, and motion preferences.

Sources and browser support

MDN: opacity describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.