References

Beginner-friendly references for web development, with live, editable examples.

The CSS opacity property

Property CSS All modern browsers Updated
Quick answer

The CSS opacity property sets how see-through an element is, from 1 (fully solid) to 0 (fully invisible). It fades the whole element, text and children included — so to make just a background semi-transparent, use an rgb() alpha value on background-color instead.

Overview

opacity sets how transparent an element is. The value runs from 1, fully opaque, down to 0, completely invisible — 0.5 is halfway. It is one of the cheapest properties to animate, which is why fades and hover effects lean on it so heavily.

The key thing to understand is that it applies to the element as a whole. Set opacity: 0.5 on a card and not just its background fades — the text, the border, the icons, every child fades with it, and you cannot make a child fully opaque again. That is usually not what people want when they reach for it to dim a background.

So there is a clear division of labor. For a translucent background behind solid text, use an alpha color like rgb(0 0 0 / 0.5). Use opacity when you genuinely want the whole element to fade — a disabled control, a hover transition, an element animating in or out. One more wrinkle: an element at opacity: 0 is invisible but still there. It still takes up space and still responds to clicks, unlike display: none.

Syntax

selector {
  opacity: value; /* 0 to 1 */
}

/* dim a disabled button */
button:disabled {
  opacity: 0.5;
}

Values

The opacity property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.

Value Description
1 Fully opaque — the default.
0 Fully transparent, but still on the page and still clickable (unlike display: none).
0 to 1 Any decimal in between, e.g. 0.5 for half-transparent.
percentage The same thing written as a percentage, e.g. 50%.

Example

Live example 
<style>
  .row { display: flex; gap: 10px; font: 600 14px system-ui, sans-serif; }
  .row div {
    background: #1c7ce9;
    color: #fff;
    padding: 18px 10px;
    border-radius: 8px;
    flex: 1;
    text-align: center;
  }
  .o100 { opacity: 1; }
  .o60  { opacity: 0.6; }
  .o30  { opacity: 0.3; }
</style>
<div class="row">
  <div class="o100">1</div>
  <div class="o60">0.6</div>
  <div class="o30">0.3</div>
</div>

Best practices

  • Use an rgb() alpha value for a see-through background — opacity fades the text and children too, which is rarely what you want there.
  • Animate opacity (often alongside transform) for smooth fades; both are cheap for the browser to render.
  • Do not rely on opacity: 0 alone to hide interactive content — it stays focusable and clickable. Combine it with visibility: hidden or remove it from the flow.
  • Keep faded text readable: dimming body copy to 0.5 can drop it below the contrast it needs. Check it the same way you would any other text.

Accessibility

Lowering an element's opacity lowers its contrast against whatever shows through behind it, so faded text can quietly fall below the readable threshold. If you dim text — for placeholder copy or a disabled state — confirm it still meets the contrast guidance for its size.

An element at opacity: 0 is invisible to sight but still present for everyone else: it keeps its space, stays in the tab order, and is announced by screen readers. If something should be hidden from all users, pair the zero opacity with visibility: hidden, or use display: none so it is removed from the accessibility tree as well.

Frequently asked questions

How do I make an element transparent in CSS?
Set opacity between 0 and 1, e.g. opacity: 0.5 for half-transparent. Remember it fades the whole element, including its text and children.
What is the difference between opacity and rgba?
opacity fades the entire element. An rgb() / rgba alpha value only makes that one color — say the background — transparent, leaving the text fully solid. Use the alpha color for translucent backgrounds.
Does opacity: 0 hide an element completely?
Visually yes, but the element still occupies space and still responds to clicks and keyboard focus. For a full hide, use display: none or add visibility: hidden.
Why is the text faded along with my background?
Because opacity applies to the whole element and cannot be undone on a child. Fade only the background by giving background-color an alpha value instead.
object-fit order