Skip to main content
Practice

Opacity

When painting with watercolors, adding water can make the colors more transparent.

As the opacity of the paint increases, the layers or background beneath it become more visible.

In CSS, the opacity property adjusts the transparency of web elements, creating an effect similar to adding transparent paint to HTML elements.


Opacity Property

The opacity property takes values 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; the larger the value, the more opaque it is.

Example code:

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

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

Follow along with the highlighted part of the code.

Want to learn more?

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