opacity & alpha transparency

Opacity controls how transparent an element is (0-1 or 0-100%). Alpha in rgba/hsla/hex8 controls color transparency. Note: opacity affects all children; alpha affects only the color.

Opacity vs Alpha

Property	Applies To	Children	Inheritance
opacity	Entire element	Affected	Yes
alpha (rgba)	Only color	Not affected	No

CSS

/* Opacity: affects entire element */
.element {
  opacity: 0.5;
  /* Entire element is 50% transparent */
}

/* Alpha in color: only the color is transparent */
.element {
  color: rgba(0, 0, 0, 0.5);
  /* Only text color is 50% transparent */
}

.element {
  background-color: rgba(255, 0, 0, 0.5);
  /* Only background is 50% transparent */
}

/* Hex with alpha (8-digit) */
.element {
  color: #ff000080;
  /* 8 digits: RRGGBBAA */
}

Common Patterns

CSS

/* Fade effect */
.fade {
  opacity: 0.7;
}

.fade:hover {
  opacity: 1;
}

/* Disabled state */
input:disabled {
  opacity: 0.6;
}

/* Semi-transparent overlay */
.overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Image with transparent tint */
img {
  opacity: 0.8;
}

/* Text with transparency */
.subtle-text {
  color: rgba(0, 0, 0, 0.6);
}

Note

Opacity makes elements transparent including all children. Use rgba/hsla/hex8 alpha for color-only transparency. Choose based on whether children should be affected.

Gradients: [Gradients (linear, radial, conic)](/css/gradients).