Opacity

You will use CSS opacity to make an element, its text, and its children partially or fully transparent, and choose when to use opacity instead of transparent colors.

What it is

opacity controls how transparent an element is. A value of 1 is fully opaque, 0 is fully transparent, and values between them blend the element with what is behind it. The property applies to the whole element as a group: background, border, text, images, and child elements are all affected.

Related terms include alpha (the transparency channel in colors), stacking context (a layer created when opacity is less than 1), and compositing (how the browser blends layers).

Why it matters

• Creates watermarks, overlays, and disabled-looking controls.
• Enables smooth fade-in and fade-out animations with transition or @keyframes.
• Helps focus attention by dimming non-active content.
• Allows layered designs without removing elements from the page flow.

Syntax or steps

The smallest useful pattern is:

.faded {
  opacity: 0.5;
}

Use a number from 0 to 1. To fade only on hover, add a transition:

.card {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.card:hover {
  opacity: 0.7;
}

Example

A common use is a faint watermark over content:

<div class="watermark">CONFIDENTIAL</div>

.watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-20deg);
  font-size: 4rem;
  color: #000;
  opacity: 0.15;
  pointer-events: none;
}

Part by part:

• position: absolute lets the watermark sit over other content.
• top, left, and transform center and rotate it.
• opacity: 0.15 makes it very faint.
• pointer-events: none prevents the invisible text from blocking clicks.

Common mistakes

• Using opacity to fade only a background. If you set opacity on a parent, its text and children fade too. Use rgba() or hsla() for the background color instead.
• Thinking opacity: 0 removes the element. It still takes up space and may still receive clicks. Use display: none to remove layout, or visibility: hidden to hide while keeping space.
• Writing opacity: 50 or opacity: 50%. The value must be a number between 0 and 1, such as 0.5.
• Forgetting stacking context. An element with opacity below 1 creates a new stacking context, which can change how z-index works.

When to use it

Use opacity when you want the entire element to become transparent. Use transparent colors when you only want the background or border to be see-through.

Practice

Guided exercise: Create a .watermark element with opacity: 0.2 and pointer-events: none. Expected result: the text is faint and does not block clicks on elements underneath.

Challenge: Make a card background semi-transparent without fading the card text. Hint: use background-color: rgba(255, 255, 255, 0.7); instead of opacity on the card.

Quick check

If a parent has opacity: 0.5 and a child has opacity: 1, what does the child look like?

The child appears faded as part of the parent group, because the parent’s opacity is applied to the whole rendered element.

Summary

opacity is a simple way to make an entire element transparent, useful for overlays, watermarks, and fades. Remember that it affects children and creates a stacking context, so use transparent colors when you need only a background to be see-through.