opacity

Definition

The opacity CSS property controls the transparency of an element and all its children. It sets the degree to which an element is visible, with values ranging from 0 (completely transparent) to 1 (completely opaque). The opacity property affects the entire element including its content, borders, and background.

Syntax

.modal-overlay {
  opacity: 0.75;
}

Values

<number> between 0 (fully transparent) and 1 (fully opaque).
inherit / initial / unset.

Practical Examples

.badge {
  opacity: 0.85;
  transition: opacity 150ms ease;
}

.badge:hover {
  opacity: 1;
}

Opacity affects an element and its children, making it a quick way to dim entire components.

HTML

Code

<div class="flex gap-4">
  <button class="rounded-full bg-sky-500 px-4 py-2 text-sm font-semibold text-white" style="opacity: 1;">Enabled</button>
  <button class="rounded-full bg-slate-500 px-4 py-2 text-sm font-semibold text-white" style="opacity: 0.4;">Disabled</button>
</div>

Tips & Best Practices

Avoid using opacity alone to represent disabled states—also change cursor or add messaging.
Combine with transition for smooth fade effects.
When you only need to adjust background transparency, consider using RGBA colors to avoid dimming children.

Accessibility & UX Notes

Ensure lowered opacity does not reduce contrast below accessible thresholds.

Browser Support

Opacity is supported in all modern browsers, including IE9+.

visibility for removing elements from layout while keeping space.
filter: opacity() when using filter stacks.
pointer-events to control interaction on semi-transparent overlays.