Opacity & Transparency

Make elements see-through with opacity and alpha colors.

Syntaxopacity: 0.5; background: rgba(41, 101, 241, 0.5);

The opacity property sets how transparent an element is, from 0 (invisible) to 1 (opaque).

Opacity affects the whole element, including its children. To make only the background transparent, use an alpha color such as rgba() instead.

Example

Try it yourself
Loading editor…
Press Run to see the result.

When to use it

  • A developer sets opacity: 0.5 on a disabled form button so users visually understand it is inactive.
  • A designer uses rgba() to tint a card overlay without affecting the opacity of child text, unlike the opacity property.
  • A developer animates opacity from 0 to 1 for a fade-in entrance effect when a modal appears on screen.

More examples

opacity property on an element

Applies 60% opacity to a full-screen overlay, making the entire element (including children) semi-transparent.

Example · css
.overlay {
  background-color: #000;
  opacity: 0.6;
  position: fixed;
  inset: 0;
}

rgba for color-only transparency

Uses rgba alpha channel so only the background is transparent while child text remains fully opaque.

Example · css
.card-overlay {
  background-color: rgba(41, 101, 241, 0.15);
  padding: 24px;
}
.card-overlay h3 {
  /* inherits full opacity — not affected by parent */
  color: #1a1a2e;
}

Fade-in animation with opacity

Transitions opacity from 0 to 1 when the .is-open class is added, creating a smooth modal fade-in.

Example · css
.modal {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.modal.is-open {
  opacity: 1;
}

Related

css colors

Discussion

  • Be the first to comment on this lesson.