Opacity and alpha

Learn transparency with opacity and rgba/hsla.

The opacity property

opacity sets an element's transparency between 0.0 and 1.0. 1 is fully visible, 0 is fully transparent, 0.5 is half transparent.

Key point: opacity affects the whole element — text, background, border and any child elements. A semi-transparent card's text turns semi-transparent too. So when you only want the background transparent, rgba() is usually the better choice.

The alpha channel: rgba and hsla

The alpha channel bakes transparency into the color value itself. rgba(0, 0, 0, 0.5) takes a fourth value from 0 to 1; 1 is fully visible, 0 is fully transparent.

The same logic applies to hsla(): hsla(355, 78%, 56%, 0.4). This way you change only the color's transparency; text and other properties stay untouched. It is ideal for a semi-transparent layer over a dark background.

opacity vs alpha

opacity and rgba() look similar but work differently. opacity: 0.5 fades the entire element; text and everything else looks washed out.

background: rgba(0, 0, 0, 0.5) fades only the background; the text stays sharp. So you reach for rgba() to dim a layer behind a heading, and for opacity to fade a whole card.

Exercise Write transparency for .overlay and .card

Add a .overlay class selector and set its background property to rgba(0, 0, 0, 0.5). Then add a .card class selector and set its opacity property to 0.8.

Show example solution

/* add transparency for .overlay and .card */
.overlay {
  background: rgba(0, 0, 0, 0.5);
}
.card {
  opacity: 0.8;
}

Test yourself

What happens to a card with opacity: 0.5?
```
.card {
  background: white;
  opacity: 0.5;
}
```
- Only the background turns half transparent
- Only the border is affected
- The card's background, text and children turn half transparent
- The card becomes fully invisible
Show answer

The card's background, text and children turn half transparent — Correct. opacity makes the whole element and its children half transparent, not just the background.

Write the alpha value for a half-transparent overlay

.overlay {
  background: rgba(0, 0, 0, ____);
}

Show answer

.overlay {
  background: rgba(0, 0, 0, 0.5);
}

Match each transparency value to its effect

opacity: 0.5

Whole element half transparent
rgba(0,0,0,0.5)

Only color half transparent
opacity: 0

Element fully invisible
rgba(0,0,0,1)

Color fully visible

Next lesson: Background color

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies