CSS opacity Property

The opacity property specifies the transparency level of an element and all of its nested children.

selector { opacity: value; }

<number>	A number between 0.0 and 1.0 representing the level of transparency.
<percentage>	A percentage between 0% and 100% representing the level of transparency.

Code Examples

A basic example showing a semi-transparent box that becomes fully opaque when the user hovers over it.

<style>
.ghost-box {
  width: 200px;
  height: 200px;
  background-color: #ff0000;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.ghost-box:hover {
  opacity: 1.0;
}
</style>
<div class="ghost-box">Hover over me to see me turn solid.</div>

An advanced example using JavaScript to toggle a full-screen overlay by transitioning the opacity and managing pointer events.

<style>
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
}
.overlay.active {
  opacity: 0.8;
  pointer-events: auto;
}
</style>
<div id="modal" class="overlay">Click anywhere to close.</div>
<button onclick="toggleModal(true)">Launch Modal</button>
<script>
const modal = document.getElementById("modal");
function toggleModal(show) {
  if (show) {
    modal.classList.add("active");
  } else {
    modal.classList.remove("active");
  }
}
modal.addEventListener("click", () => toggleModal(false));
</script>

Pro Tip

Opacity is one of the most performance-friendly properties to animate. Because it does not trigger a 'reflow' of the page layout, the browser's GPU can handle the transition smoothly. If you are building high-performance web apps, stick to animating opacity and transforms whenever possible to keep your frame rates high.

Deep Dive

Think of opacity like a dimmer switch for a light bulb. At 1.0, the bulb is full strength and the object is solid. At 0.0, the light is off and the object is invisible. When you apply opacity to a parent container, the browser renders that element into an off-screen buffer before painting it back onto the page with the transparency applied. This means the entire group, including text and images inside, gets faded together. It is not just the background color being changed; the whole element becomes a ghostly layer on the screen.

Best Practices

Use opacity for UI state changes like hovering or disabling buttons. If you only want a transparent background while keeping the text inside fully solid, do not use the opacity property. Instead, use a color function like rgba() or hsla() for the background-color. This prevents your content from becoming hard to read.

Common Pitfalls

The most common headache for beginners is inheritance. If you set a parent div to 0.5 opacity, you cannot 'fix' a child element by setting it to 1.0. If the father is half-invisible, the children are going to be half-invisible too. Also, setting opacity to any value less than 1 creates a new stacking context, which can cause your z-index layering to behave differently than you expect.

Accessibility

Low opacity values can kill your color contrast ratios, making text impossible for some users to read. Never use opacity: 0 to hide sensitive or functional elements from screen readers if they are still meant to be part of the document flow; use display: none or the hidden attribute for that. Always ensure text remains legible against its background when fading elements.

Dev Data Table: opacity property

default	1
animatable	yes
inherited	no
experimental	no
year_intro	2003
year_standard	2009
js_syntax_1	element.style.opacity = "0.5";
js_syntax_2	element.style.setProperty("opacity", "0.5");
js_note	When manipulating via JavaScript, the value is treated as a string, but usually represents a float between 0.0 and 1.0.
browsers	{ "Chrome": 1, "Edge": 12, "Firefox": 1, "Safari": 1.2, "Opera": 9, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": 1, "Opera Mobile": 10 }