Runnable CSS Docs: Opacity

Q: What does opacity do in CSS?

It sets how see-through an element is, from 0 (fully transparent) to 1 (fully opaque). It applies to the whole element, including its text, border, images and every child, as one flattened layer.

Q: How do I make only the background transparent, not the text?

Leave opacity alone and give the background a color with alpha: background-color: rgb(37 99 235 / 0.5); or rgba(37, 99, 235, 0.5). The text and children stay fully opaque.

Q: Can a child element be more opaque than its parent?

No. A parent's opacity applies to the whole group, so opacity: 1 on a child cannot undo it. A child of a parent at 0.5 is drawn at most at half opacity. Move the transparency to the parent's background color instead.

Q: What is the difference between opacity: 0, visibility: hidden and display: none?

opacity: 0 hides the element but it still takes up space, can be clicked, and is read by screen readers. visibility: hidden keeps the space but is not clickable or read. display: none removes it from the layout entirely.

Q: Can opacity be a percentage?

Yes. opacity: 50% is the same as opacity: 0.5 in all current browsers. Values below 0 or above 1 are clamped to that range.

What opacity does

opacity sets how see-through an element is: 1 is solid (the default), 0 is invisible, and anything in between lets the background show through. The boxes below sit on a striped background so you can see it:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Opacity</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .bg {
      display: flex;
      gap: 12px;
      padding: 16px;
      background: repeating-linear-gradient(45deg, #e5e7eb 0 10px, #ffffff 10px 20px);
    }
    .box { width: 90px; height: 70px; background: #2563eb; color: white; display: grid; place-items: center; font-weight: 700; }
  </style>
</head>
<body>
  <div class="bg">
    <div class="box" style="opacity: 1">1</div>
    <div class="box" style="opacity: 0.75">0.75</div>
    <div class="box" style="opacity: 0.5">0.5</div>
    <div class="box" style="opacity: 0.25">0.25</div>
    <div class="box" style="opacity: 0">0</div>
  </div>
</body>
</html>

The last box is still there: it takes its 90px slot in the row, it just draws nothing. Notice that the white numbers fade with their boxes. opacity applies to the element and everything inside it.

Transparent background, solid text

Because opacity fades the children too, it is the wrong tool for "a see-through background behind readable text". Use a background color with an alpha channel instead:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background alpha</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .bg { padding: 16px; background: repeating-linear-gradient(45deg, #f59e0b 0 10px, #ffffff 10px 20px); }
    .card { padding: 14px; margin-bottom: 10px; color: #111827; font-weight: 700; }
    .with-opacity { background: #ffffff; opacity: 0.6; }
    .with-alpha { background: rgb(255 255 255 / 0.6); }
  </style>
</head>
<body>
  <div class="bg">
    <div class="card with-opacity" id="a">opacity: 0.6 (text fades too)</div>
    <div class="card with-alpha" id="b">background alpha 0.6 (text stays solid)</div>
  </div>
  <p id="out"></p>
  <script>
    const s = (id) => getComputedStyle(document.getElementById(id));
    document.getElementById('out').textContent =
      'first: opacity ' + s('a').opacity + '  |  second: opacity ' + s('b').opacity + ', background ' + s('b').backgroundColor;
  </script>
</body>
</html>

Both white panels let the stripes show through by the same amount. In the first, the text is faded along with the panel. In the second only the background color is transparent (rgb(255 255 255 / 0.6), the same as rgba(255, 255, 255, 0.6)), so the text stays solid and easy to read. Colors with alpha are covered on the colors page.

A child cannot escape its parent's opacity: opacity: 1 on the child does nothing, because the parent is drawn as one faded layer with the child already inside.

Values

Value	Result
`1` or `100%`	fully opaque (default)
`0.5` or `50%`	half transparent
`0` or `0%`	fully transparent, still in the layout and clickable
`1.5`, `-1`	clamped to `1` and `0`

Opacity is inherited visually but not as a property: a child's computed opacity stays 1, while it is drawn inside a faded parent.

opacity: 0 vs visibility: hidden vs display: none

All three make an element disappear, but they differ in everything else:

	`opacity: 0`	`visibility: hidden`	`display: none`
Takes up space	yes	yes	no
Receives clicks and focus	yes	no	no
Read by screen readers	yes	no	no
Can be transitioned	yes, smoothly	switches at one end, no fade	no

The difference that bites is the second row. A button at opacity: 0 can still be clicked and tabbed to:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hidden but clickable</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 10px; }
    .row button { width: 150px; height: 40px; font: inherit; }
  </style>
</head>
<body>
  <div class="row">
    <button id="o" style="opacity: 0">opacity: 0</button>
    <button id="v" style="visibility: hidden">visibility: hidden</button>
    <button id="d" style="display: none">display: none</button>
    <button id="shown">Visible</button>
  </div>
  <p id="out"></p>
  <script>
    const hit = (id) => {
      const r = document.getElementById(id).getBoundingClientRect();
      const top = document.elementFromPoint(r.left + 10, r.top + 10);
      return id + ': ' + (top && top.id === id ? 'clickable' : 'not clickable');
    };
    document.getElementById('out').textContent = [hit('o'), hit('v')].join('  |  ') +
      '  |  the Visible button starts at x = ' + document.getElementById('shown').offsetLeft + 'px';
  </script>
</body>
</html>

The readout asks the browser which element is under a point inside each hidden button. The opacity: 0 button answers "clickable"; the visibility: hidden one does not. The Visible button starts after two empty 150px slots, because the display: none button is the only one that gave its space back. To fade something out and then take it away, animate opacity and set visibility: hidden at the end.

Fading on hover

opacity is one of the cheapest properties to animate, so it is the standard way to fade things in and out. A caption that appears over an image:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover fade</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .tile { position: relative; width: 240px; height: 150px; background: linear-gradient(135deg, #2563eb, #16a34a); }
    .caption {
      position: absolute;
      inset: auto 0 0 0;
      padding: 10px;
      background: rgb(17 24 39 / 0.8);
      color: white;
      opacity: 0;
      transition: opacity 0.25s ease-out;
    }
    .tile:hover .caption, .tile:focus-within .caption { opacity: 1; }
  </style>
</head>
<body>
  <a class="tile" href="#" style="display: block">
    <span class="caption">Caption appears on hover and focus</span>
  </a>
</body>
</html>

:focus-within shows the caption to keyboard users too. Keep in mind the table above: while invisible, the caption is still read by screen readers, which is what you want for a caption.

Accessibility: faded text loses contrast

Lowering opacity lowers contrast. Gray text on white at opacity: 0.5 can drop well below the 4.5:1 ratio body text needs. For secondary text, pick a color that passes contrast rather than fading a dark one. For disabled controls, reduced opacity is a common signal, but pair it with the disabled attribute so the control is also unreachable by keyboard and announced as disabled.

Side effect: stacking context

Any opacity below 1 creates a new stacking context, like transform does. Children with a high z-index then stack only inside the faded element and cannot rise above elements outside it. If a dropdown inside a faded panel slides under another element, this is the reason (the z-index page explains stacking).

Common mistakes

Fading a card to make its background transparent. The text fades too. Use rgb(... / 0.5) on the background.
Trying to make a child opaque again. A parent's opacity limits every child.
Hiding with opacity: 0 alone. The element still takes clicks and focus. Add visibility: hidden, or use display: none (pointer-events: none stops clicks but not keyboard focus).
Writing opacity: 50. Opacity is 0 to 1; 50 is clamped to 1. Write 0.5 or 50%.
Low-contrast text through opacity. Check the contrast of the result, not of the original color.

Frequently Asked Questions

What does opacity do in CSS?

It sets how see-through an element is, from 0 (fully transparent) to 1 (fully opaque). It applies to the whole element, including its text, border, images and every child, as one flattened layer.

How do I make only the background transparent, not the text?

Leave opacity alone and give the background a color with alpha: background-color: rgb(37 99 235 / 0.5); or rgba(37, 99, 235, 0.5). The text and children stay fully opaque.

Can a child element be more opaque than its parent?

No. A parent's opacity applies to the whole group, so opacity: 1 on a child cannot undo it. A child of a parent at 0.5 is drawn at most at half opacity. Move the transparency to the parent's background color instead.

What is the difference between opacity: 0, visibility: hidden and display: none?

opacity: 0 hides the element but it still takes up space, can be clicked, and is read by screen readers. visibility: hidden keeps the space but is not clickable or read. display: none removes it from the layout entirely.

Can opacity be a percentage?

Yes. opacity: 50% is the same as opacity: 0.5 in all current browsers. Values below 0 or above 1 are clamped to that range.

Related concepts