Opacity & Alpha

Opacity and alpha both make things see-through — but they work at different levels. opacity is a property on the element; alpha lives inside a colour value. That one difference changes what fades, and how it stacks.

Where you meet it

Tints & overlays — a translucent scrim over a hero image, a frosted panel: rgb(0 0 0 / 40%).
Whole-element states — a disabled button, a fading-in card, a dimmed modal backdrop.
Anywhere you reach for a hover or focus effect that softens a colour without touching the rest.

What it does

The opacity property sets the transparency of the whole element and everything inside it — background, border, and text together. An alpha channel is the last slot in a colour: rgb(R G B / A) or hsl(H S L / A). It makes just that one colour translucent and leaves the rest of the element fully opaque.

Need solid text on a faded panel? Put alpha on the background — opacity drags every child down with it.

How it works

Think of opacity as a post-processing step: the browser renders the element normally, then composites the finished result onto the page at the given strength. That's why it catches every child — there's nothing left to spare. Alpha, by contrast, only blends one colour with whatever is behind it. The <alpha-value> is a number from 0 (transparent) to 1 (opaque), or a percentage; legacy rgba()/hsla() are now just aliases for rgb()/hsl().

/* alpha — only the fill fades, text stays solid */
.tint  { background: rgb(255 255 255 / 0.6); }

/* opacity — the box AND its text fade together */
.ghost { opacity: 0.6; }

Put readable text on each: .tint keeps crisp black text on a milky panel; .ghost dims the text right along with the box.

Watch out

Opacity creates a stacking context. Any value below 1 puts the element in its own layer — which can quietly override your z-index ordering.
Children can't escape it. A child is never more opaque than its faded parent. Need solid text on a faded panel? Use alpha on the background, not opacity on the box.
Stacking several alpha layers compounds: two 50% overlays don't equal one 50% — each composites onto the result below it.

Go deeper

Opacity und Alpha machen beide etwas durchsichtig — aber auf verschiedenen Ebenen. opacity ist eine Eigenschaft am Element; Alpha steckt im Farbwert selbst. Genau dieser Unterschied entscheidet, was verblasst und wie es sich stapelt.

Wo es vorkommt

Tints & Overlays — ein durchscheinender Schleier über einem Hero-Bild, ein Milchglas-Panel: rgb(0 0 0 / 40%).
Zustände des ganzen Elements — ein deaktivierter Button, eine einblendende Karte, ein abgedunkelter Modal-Hintergrund.
Überall, wo ein Hover- oder Fokus-Effekt eine Farbe weicher machen soll, ohne den Rest anzufassen.

Was es tut

Die Eigenschaft opacity setzt die Transparenz des ganzen Elements samt allem darin — Hintergrund, Rahmen und Text zusammen. Ein Alpha-Kanal ist der letzte Slot in einer Farbe: rgb(R G B / A) oder hsl(H S L / A). Er macht nur diese eine Farbe durchscheinend und lässt den Rest des Elements voll deckend.

Deckenden Text auf einem verblassten Panel? Alpha auf den Hintergrund — opacity zieht jedes Kind mit runter.

Wie es funktioniert

Denk dir opacity als Nachbearbeitungsschritt: Der Browser rendert das Element normal und compositet das fertige Ergebnis dann mit der angegebenen Stärke auf die Seite. Darum erwischt es jedes Kind — es bleibt nichts ausgenommen. Alpha mischt dagegen nur eine Farbe mit dem, was dahinter liegt. Der <alpha-value> ist eine Zahl von 0 (transparent) bis 1 (deckend) oder ein Prozentwert; die alten rgba()/hsla() sind heute nur noch Aliase für rgb()/hsl().

/* Alpha — nur die Füllung verblasst, Text bleibt deckend */
.tint  { background: rgb(255 255 255 / 0.6); }

/* opacity — Box UND Text verblassen gemeinsam */
.ghost { opacity: 0.6; }

Schreib lesbaren Text in beide: .tint behält knackig schwarzen Text auf einem milchigen Panel; .ghost dimmt den Text zusammen mit der Box.

Worauf achten

Opacity erzeugt einen Stacking Context. Jeder Wert unter 1 legt das Element in eine eigene Ebene — das kann deine z-index-Reihenfolge still aushebeln.
Kinder kommen da nicht raus. Ein Kind ist nie deckender als sein verblasstes Eltern-Element. Du brauchst deckenden Text auf einem verblassten Panel? Setz Alpha auf den Hintergrund, nicht opacity auf die Box.
Mehrere Alpha-Ebenen übereinander addieren sich: Zwei 50%-Overlays ergeben nicht ein 50% — jedes compositet auf das Ergebnis darunter.