Opacity, alpha and transparent are not the same

Three different mechanisms get called transparency, and mixing them up produces two of the most common CSS bugs: text that fades when you only wanted the box to, and a gradient that turns grey on its way out.

opacity applies to everything inside

Setting opacity on an element renders that element and all of its descendants as a single group, then makes the whole group translucent. You cannot opt a child back in. A heading inside a card at 0.5 opacity is at 0.5 opacity, and no amount of colour on the heading will restore it.

/* the text fades too — usually not what was wanted */
.card { opacity: 0.5; }

/* only the surface fades; the text stays solid */
.card { background: rgb(15 55 255 / 50%); }

Alpha applies to one colour

An alpha channel belongs to a colour value, not an element. It affects exactly the thing it is applied to — a background, a border, a shadow — and nothing else in the subtree.

This is almost always what you want for surfaces, overlays and scrims. Reach for opacity only when you genuinely mean the whole element, such as fading out a component during a transition.

transparent is transparent black

The keyword transparent is defined as rgb(0 0 0 / 0). It has a colour, and that colour is black. In most places this never shows, because fully transparent is fully transparent. In a gradient it shows badly.

/* drifts through grey on the way out */
background: linear-gradient(90deg, #0F37FF, transparent);

/* fades cleanly */
background: linear-gradient(90deg, #0F37FF, rgb(15 55 255 / 0));

The reason is interpolation. The browser blends between the two endpoint colours, and if one endpoint is black at zero alpha, the midpoints carry some of that black even as they fade.

Choosing between them

• Fading a whole component in or out: opacity.
• A translucent panel with readable text on it: alpha on the background.
• A gradient that disappears: fade to the same colour at zero alpha, never to transparent.
• Unexplained z-index behaviour: check whether an ancestor has opacity below 1.

Accessibility consequences of fading text

Both techniques reduce contrast, and contrast requirements apply to the rendered result rather than to the colour you declared. Text at sixty percent alpha over white is measured as the blend, not as the original colour, and a value that passed at full strength will often fail once faded.

This is the most common cause of a palette that measures correctly in a swatch grid and fails on the actual page. Muted captions and metadata are usually where it happens, because fading is the quickest way to make something look secondary.

A quick decision table

How alpha actually composites

The blended result is a weighted average of the two colours, channel by channel, using the alpha as the weight. Black at forty percent over white gives 0.4 times 0 plus 0.6 times 255, which is 153 — a mid grey, and the value any contrast check will actually measure.

// what the browser paints for colour over background
const blend = (fg, bg, alpha) =>
  fg.map((c, i) => Math.round(c * alpha + bg[i] * (1 - alpha)));

blend([0, 0, 0], [255, 255, 255], 0.4); // [153, 153, 153]

Knowing the arithmetic is useful because it lets you work backwards. If you need a muted text colour that measures 4.5:1 against white, you can compute which alpha of your text colour lands there rather than trying values until one passes.

Stacked transparency compounds

Alpha values do not add, they multiply through the stack. A panel at eighty percent inside a container at eighty percent renders at sixty-four percent of full strength, and a third layer takes it to about half. Interfaces built from nested translucent surfaces drift towards invisible in ways that are hard to trace, because no single declaration looks wrong.