Opacity

In CSS Colors, you learned about the different color values used in CSS to set solid colors for text or backgrounds. It is also possible to control the opacity or transparency of colors via CSS. One way of doing this is via the opacity property which takes a number value as either a decimal or percentage. As a result, even though this code uses different values, both the h1 and h2 would have the same opacity effect:

h1 {
  opacity: 0.3;
}
h2 {
  opacity: 30%;
}

A solid color is represented by an opacity value of 100% or 1.0. Unless the element’s opacity has been previously modified, you usually don’t need to set these values.

Using an opacity value of 0 would render the element invisible. It would still take up space in the browser, but would be invisible, as you can see in this example:

It’s important to realize that opacity applies to the entire element and not just its background color. In the following demo, you can see the effect of opacity:

As this is rarely the result you want in your designs, you should instead use rgba or hsla color values when you want a transparent effect to your colors. These values are formatted exactly like the rgb and hsl values earlier with two changes:

• the name changes from rgb to rgba or from hsl to hsla
• another color value is added to the list inside the parentheses to represent the degree of opacity

In this example, the h1 would have a solid background color and the h2 would have the same color, but at 30% opacity:

h1 {
  background-color: hsl(338, 66%, 34%);
}
h2 {
  backgaround-color: hsla(338, 66%, 34%, 30%);
}

The following demo shows the difference between opacity and an HSLA color value; in both cases, an opacity of 30% is used: