0Pricing
CSS Academy · Lesson

Opacity and RGBA Transparency

Control element transparency using the opacity property and rgba() color values.

The opacity Property

The opacity property sets the transparency of the entire element including its children and content. Values range from 0 (fully transparent) to 1 (fully opaque).

.overlay {
  background: black;
  opacity: 0.5;
}

opacity Affects All Children

A key caveat: opacity affects the whole element tree. Text, images, and child elements inside an element with opacity: 0.5 are all 50% transparent — you cannot make children more opaque than their parent.

All lessons in this course

  1. Color Values: Named, Hex, RGB, HSL
  2. Background Color and Image
  3. Gradients: Linear and Radial
  4. Opacity and RGBA Transparency
← Back to CSS Academy