The opacity property sets an element's overall transparency, from fully invisible (0) to fully opaque (1), affecting the entire element including its content, not just its background.

Syntax

opacity: value; /* 0 to 1 */

Deep Dive Course

opacity applies uniformly to an entire element and everything inside it, its background, border, text, and any nested children, all becoming proportionally transparent together, which is fundamentally different from setting a color using rgba() or hsl() with an alpha value, which only makes that one specific property, like just the background color, semi-transparent while leaving text and other properties fully opaque. This means opacity: 0.5 on a parent element also makes its nested children appear at 50% opacity, even if those children have their own fully opaque colors set, since opacity affects the entire rendered element as a single composited layer rather than any one individual property.

1Understanding Opacity

💡

Use rgba()/hsl() with an alpha value on a specific property, like background-color, when you only want that one property semi-transparent — use the opacity property only when you want the entire element, including all of its text and nested children, to become uniformly transparent together.

editor.html

.overlay {
  background-color: black;
  opacity: 0.5;
}

localhost:3000

2Practical Example

Here is a real-world application of Opacity showing how it is used in production CSS code.

editor.html

.tinted-box {
  background-color: rgba(0, 0, 0, 0.5);
}

<div class="tinted-box"><p>Fully opaque text</p></div>

localhost:3000

3Best Practices

Follow these guidelines when working with Opacity:

1. Use an alpha-channel color value, like rgba(), on a specific property when you want only that one property semi-transparent, not the whole element

2. Use the opacity property specifically when an entire element, including its text and children, should fade or appear uniformly translucent together

3. Remember opacity: 0 still occupies layout space and remains in the accessibility tree/interactive, unlike display: none, which is important when hiding something purely visually versus removing it entirely

⚠️

Tip: Use rgba()/hsl() with an alpha value on a specific property, like background-color, when you only want that one property semi-transparent — use the opacity property only when you want the entire element, including all of its text and nested children, to become uniformly transparent together.

editor.html

.overlay {
  background-color: black;
  opacity: 0.5;
}

localhost:3000

Examples

Example 01Basic Usage

.overlay {
  background-color: black;
  opacity: 0.5;
}

Example 02Advanced Example

.tinted-box {
  background-color: rgba(0, 0, 0, 0.5);
}

<div class="tinted-box"><p>Fully opaque text</p></div>

Best Practices

Use an alpha-channel color value, like rgba(), on a specific property when you want only that one property semi-transparent, not the whole element
Use the opacity property specifically when an entire element, including its text and children, should fade or appear uniformly translucent together
Remember opacity: 0 still occupies layout space and remains in the accessibility tree/interactive, unlike display: none, which is important when hiding something purely visually versus removing it entirely

Interview Question

Why does setting opacity: 0.5 on a parent element make its nested children appear semi-transparent too, even if those children have their own fully opaque background and text colors set?▼

Hint: Think about whether opacity operates on individual CSS properties like a color value would, or on something more like the element's entire rendered output as a single unit.

The opacity property doesn't work by adjusting any individual color value's alpha channel the way rgba() does — instead, it affects how the entire element, together with everything rendered inside it, is composited as a single combined layer onto whatever's behind it, uniformly scaling that entire composited result's visibility. Because a parent element's rendering inherently includes its children as part of that same visual layer being composited, opacity applied to the parent scales the transparency of that whole combined layer together, children included, regardless of what fully opaque colors those children might have individually specified for themselves. This is fundamentally different from setting a semi-transparent background-color via rgba() specifically on the parent, which only affects that one particular property's own rendering and has no bearing at all on the separately-rendered opacity of the parent's nested children, which is exactly why the two approaches produce such different visual results despite both superficially being about transparency.

Exercises

MediumPractice using Opacity in a real scenario.

View Solution

.overlay {
  background-color: black;
  opacity: 0.5;
}

Frequently Asked Questions

Why does setting opacity: 0.5 on a parent element make its nested children appear semi-transparent too, even if those children have their own fully opaque background and text colors set?▼

Related Functions

ColorBackground-colorClip-path