lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

webIntroCssChapter5Title

lesson12Title

lesson13Title

webIntroCssChapter1Title

webIntroCssChapter2Title

webIntroCssChapter3Title

webIntroCssChapter4Title

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans"
      rel="stylesheet"
    />
    <title>Opacity Example</title>
  </head>
  <body>
    <div class="transparent-box">This text box is 50% transparent.</div>
    <div class="opaque-box">This text box is fully opaque.</div>
  </body>
</html>

# 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.

<br />

**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 title="CSS"
.transparent-box {
  opacity: 0.5; /* 50% transparency */
}

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

<br />

Follow along with the highlighted part of the code.

In CSS, the `opacity` property value ranges from 0.0 to 1.0. A value of 0.0 means fully transparent, while a value of 1.0 means fully opaque. Therefore, 0.0 is the most transparent value.

### In CSS, you can use the `opacity` property to adjust the transparency of an element. Choose the most transparent value from the following.

Opacity

In CSS, you can use the opacity property to adjust the transparency of an element. Choose the most transparent value from the following.

In CSS, you can use the `opacity` property to adjust the transparency of an element. Choose the most transparent value from the following.