🎓 A1Learner
🔍

CSS Opacity

Opacity is a property that fades a whole element. A value of 1 is fully solid, and a value of 0 is fully invisible.

Fade the picture

Half opacity makes the picture half faded. The page behind it shows through.

.pic {
  opacity: 0.5;
}

Fade a whole box

The box and everything inside it fade as one group. The heading inside keeps its own opacity value of 1, yet it still renders faded.

.box {
  opacity: 0.6;
}

Fade only a background

An rgba background fades only the background colour. The box itself keeps full opacity, so its text stays solid.

.box {
  background-color: rgba(0, 0, 255, 0.3);
}

Example

h1 {
  opacity: 0.8;
}
.pic {
  opacity: 0.5;
}
.box {
  background-color: rgba(0, 0, 255, 0.3);
}

Key points

  • The opacity value runs from 0 for invisible to 1 for solid.
  • Opacity fades the content, the background, the borders and the children together.
  • An alpha value in a colour fades only that colour.
  • A faded element still takes up its space on the page.
  • A faded element still receives clicks.

In this example, the heading rule fades the heading a little. The picture rule fades the picture to half strength. The box rule uses an rgba background colour instead of opacity. Only the box background fades, and its text stays solid.

Note

Opacity on a parent fades the whole group, and a child cannot undo it with its own value.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

What does opacity: 0.5 do to an element?