👁️ opacity

Syntax & Values

opacity: 1;      /* fully visible (default) */
opacity: 0.5;    /* 50% transparent */
opacity: 0;      /* fully invisible (still occupies space) */
opacity: 50%;    /* same as 0.5 — percentage syntax */

Effect on Children

opacity applies to the element and all its descendants as a group. You cannot make a child more opaque than its parent:

.parent {
  opacity: 0.5;
}
.child {
  opacity: 1; /* Still appears at 50% — can't override parent opacity */
}

If you only want a transparent background without affecting text, use rgba() instead:

/* This only makes the background transparent, not the text */
.card {
  background: rgba(99, 102, 241, 0.1);  /* ✅ children unaffected */
  /* NOT: opacity: 0.1;  ← would make all children transparent too */
}

Stacking Context

Any element with opacity less than 1 creates a new stacking context. This means:

• Its children's z-index values only compete with each other, not with elements outside
• This can cause z-index issues — if your z-index isn't working, check parent elements for opacity < 1, transform, or filter

Alternatives