The CSS property opacity controls how transparent an element appears when it is painted to the page. Rather than changing layout or the element’s box model, it changes the element’s final composited alpha so the element and its descendants are blended with whatever is behind them. Because it affects the rendered output, using opacity is a straightforward way to create fade effects and to make content visually recede without removing it from the document flow.

When you apply opacity to an element, that visual transparency applies to the element’s children and pseudo‑elements as well — the browser composites that subtree together and then blends the result. Changing opacity can also affect painting and stacking behavior: in many cases an element with reduced opacity will create a new stacking context, which changes how z-ordering is resolved; see z-index for related stacking considerations. Because the compositing step is separate from layout, you’ll often see GPU acceleration used for animating opacity, producing smoother visual transitions.

It’s important to distinguish visual transparency from interactivity and accessibility. An element made invisible by opacity still occupies its layout space and remains in the accessibility tree and in hit testing — clicks, focus, and keyboard events will still target it unless you change pointer behavior or visibility. To alter whether an element can receive pointer events, use pointer-events; to remove it from the rendering but keep layout space, see visibility; and to remove it entirely from layout and the accessibility tree, use display.

For common patterns, opacity is often combined with transitions or animations to create fades — these are typically driven by the transition or animation system. If you need only a translucent background without dimming children, prefer using semi‑transparent colors on backgrounds (for example via background-color) or an overlay pseudo‑element so child content remains fully opaque. For more complex visual effects (blur, hue shifts, brightness), consider the filter property as an alternative or complement to opacity-based approaches.