CSS Opacity & Transparency

CSS provides several ways to make colors and elements partially or completely transparent, allowing content behind them to remain visible.

Transparency can be applied to an individual color using an alpha value, or to an entire element using the opacity property. Although these methods can produce similar visual effects, they behave differently.

Alpha Transparency

CSS color functions can include an alpha value that controls the transparency of the color itself. An alpha value of 1 is fully opaque, while 0 is fully transparent.

background-color: rgb(0 136 204 / 1);
background-color: rgb(0 136 204 / 0.75);
background-color: rgb(0 136 204 / 0.5);
background-color: rgb(0 136 204 / 0);

Alpha transparency can also be used with other color functions, including hsl() and hwb().

background-color: hsl(200 100% 40% / 0.5);
background-color: hwb(200 0% 20% / 0.5);

Because alpha is part of the color value, it affects only the property using that color.

The opacity Property

The CSS opacity property controls the opacity of an entire element. It accepts a value from 0 through 1.

.example {
  opacity: 0.5;
}

A value of 1 makes the element fully opaque, while 0 makes it fully transparent. Values between them create partial transparency.

Unlike an alpha color value, opacity applies to the entire element as a single rendered result, including its background, borders, text, images, and other content.

Alpha vs Opacity

The difference between alpha transparency and the opacity property is important when an element contains text or other content.

.alpha-example {
  background-color: rgb(0 136 204 / 0.5);
  color: black;
}

.opacity-example {
  background-color: rgb(0 136 204);
  color: black;
  opacity: 0.5;
}

In the first example, only the background color is partially transparent, so the text remains fully opaque. In the second example, the opacity property makes both the background and text partially transparent.

When you only want a background, border, or text color to be transparent, an alpha color value usually provides more precise control.

The transparent Keyword

The CSS transparent keyword represents a fully transparent color. It can be used anywhere a CSS color value is accepted.

background-color: transparent;
border-color: transparent;

A transparent color does not make the entire element disappear. It makes only the property using that color transparent.

Percentage Opacity

Modern CSS also allows the opacity property to be written as a percentage. A value of 100% is fully opaque, while 0% is fully transparent.

opacity: 100%;
opacity: 75%;
opacity: 50%;
opacity: 0%;

For example, opacity: 50%; represents the same level of opacity as opacity: 0.5;.

Opacity & Transparency Example

Use the Transparency slider to compare alpha transparency with the opacity property. Both examples use the same blue color and transparency level, but they affect the text differently.

<style>
.alpha-example {
  background-color: rgb(0 136 204 / 0.5);
  color: black;
}
.opacity-example {
  background-color: rgb(0 136 204);
  color: black;
  opacity: 0.5;
}
</style>

Play in Editor

Notice that the text in the alpha example remains fully opaque, while the text in the opacity example becomes transparent along with the element.