Opacity

When painting, mixing in water makes the colors more transparent.

As the transparency increases, the layers or background beneath become more visible.

In CSS, opacity is a property that adjusts the transparency of web elements, giving HTML elements the effect similar to transparent paint.

The opacity property has a value between 0.0 and 1.0.

Here, 0.0 means completely transparent and 1.0 means completely opaque.

The smaller the value, the more transparent the element becomes, and the larger the value, the more opaque it becomes.

Copy
.transparent-box {
  opacity: 0; /* Fully transparent */
}

.half-transparent-box {
  opacity: 0.5; /* 50% transparent */
}

.opaque-box {
  opacity: 1; /* Opaque (default) */
}

Follow the highlighted parts of the code and try entering them yourself.