Skip to main content
Practice

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.

CSS Example
.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.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.