Opacity and RGBA Transparency

The opacity property sets the transparency of the entire element including its children and content. Values range from 0 (fully transparent) to 1 (fully opaque).

A key caveat: opacity affects the whole element tree. Text, images, and child elements inside an element with opacity: 0.5 are all 50% transparent — you cannot make children more opaque than their parent.

To make only the background color transparent without affecting text or children, use rgba() instead of opacity:

Use this mental model:

• opacity: 0.5 — whole element + children become transparent
• rgba(r,g,b,0.5) — only the color value is transparent; children remain unaffected

The same principle applies to hsla(). The fourth argument is the alpha channel (0–1):

Modern CSS allows a slash separator for alpha in rgb() and hsl() without the "a" variant:

All three hide elements but differently:

• opacity: 0 — invisible but still takes up space and is clickable
• visibility: hidden — invisible, takes up space, not clickable
• display: none — removed from layout entirely

Because opacity is composited on the GPU, it is one of the cheapest CSS properties to animate. Fade-in/out effects should always use opacity transitions rather than background-color.

To give an element a translucent background while keeping text fully legible, use rgba() on background-color:

Use RGBA in border-color and box-shadow to create subtle, transparent effects:

Low-opacity text reduces readability and may fail WCAG color contrast requirements. Always verify contrast ratios when using transparency on text. Ensure a minimum 4.5:1 ratio for normal text.

An element has opacity: 0.3. What happens to text inside it?

opacity makes an entire element and its children transparent. Use rgba() or hsla() for transparent colors without affecting children. Opacity transitions are GPU-accelerated and performant. Always check contrast ratios when using transparency on text.