How to make a box semi-transparent

If you would like the box and all of the contents of the box to change opacity, then the CSS opacity property is the tool to reach for. Opacity is the opposite of transparency; therefore opacity: 1 is fully opaque—you will not see through the box at all.

Using a value of 0 would make the box completely transparent, and values between the two will change the opacity, with higher values giving less transparency.

In many cases you will only want to make the background color itself partly transparent, keeping the text and other elements fully opaque. To achieve this, use a <color> value that has an alpha channel, such as rgb(). As with opacity, a value of 1 for the alpha channel value makes the color fully opaque. Therefore, background-color: rgb(0 0 0 / 50%); will set the background color to 50% opacity.

Try changing the opacity and alpha channel values in the below examples to see more or less of the background image behind the box.

<div class="wrapper">
  <div class="box box1">This box uses opacity</div>
  <div class="box box2">
    This box has a background color with an alpha channel
  </div>
</div>

body {
  font-family: sans-serif;
}

.wrapper {
  height: 200px;
  display: flex;
  gap: 20px;
  background-image: url("https://mdn.github.io/shared-assets/images/examples/balloon.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 20px;
}

.box {
  flex: 1;
  border: 5px solid #000;
  border-radius: 0.5em;
  font-size: 140%;
  padding: 20px;
}

.box1 {
  background-color: #000;
  color: #fff;
  opacity: 0.5;
}

.box2 {
  background-color: rgb(0 0 0 / 0.5);
  color: #fff;
}

• Applying color to HTML elements using CSS.