Set opacity with hex colors

Add two alpha digits after the usual six color digits: #RRGGBBAA. The alpha ranges from 00, fully transparent, to FF, fully opaque. 80 is approximately 50% opacity.

.overlay {
  background-color: #00000080;
}

.card {
  border: 1px solid #ffffff33; /* 20% opacity */
}

Unlike the opacity property, an alpha color only affects that color. Text and other content inside the element stay fully opaque. Modern RGB syntax is another readable way to write the same values.

.overlay {
  background-color: rgb(0 0 0 / 50%);
}