CSS Opacity and Transparency

The opacity property controls the transparency level of an element and all its children.

Opacity Values

opacity accepts values from 0.0 (fully transparent) to 1.0 (fully opaque).

Opacity affects the entire element including all children.

For transparent backgrounds only, use rgba() or hsla() colors.

Often combined with :hover for fade effects.

Lower values make elements see-through.

/* Semi-transparent */
.transparent {
  opacity: 0.5;
}

/* Fully transparent */
.invisible {
  opacity: 0;
}

/* Hover fade effect */
.fade {
  opacity: 1;
  transition: opacity 0.3s;
}

.fade:hover {
  opacity: 0.7;
}

/* Transparent background only */
.bg-transparent {
  background-color: rgba(0, 0, 0, 0.5);
}