Opacity
The transparency level of an element, from 0 (invisible) to 1 (fully opaque).
Plain English
Opacity controls how see-through something is. A disabled button at 50% opacity communicates "this exists but you cannot use it right now." An overlay at 60% opacity dims the background while letting the user still sense what is behind it. In CSS, there are two ways to add transparency: the opacity property (affects the whole element including text) and rgba/hsla colour values (only affects the fill colour, not the element content).
Technical
The opacity property affects the entire element and all its descendants — including text. To make only the background transparent while keeping text fully opaque, use background-color with an alpha channel instead (e.g. rgba(0,0,0,0.5) or hsl(0 0% 0% / 0.5)). Elements with opacity < 1 create a new stacking context. Will-change: opacity enables GPU compositing for smooth transitions. opacity: 0 is not the same as visibility: hidden — opacity: 0 elements still intercept pointer events.
Live Demo
Opacity communicates hierarchy — lower opacity = secondary content.
Usage
✓ Good usage
Use opacity: 0.5 + pointer-events: none on disabled buttons — the reduced opacity signals unavailability without requiring a different colour.
✗ Bad usage
Using opacity: 0 to visually hide content — the element still occupies space, blocks clicks, and is accessible to screen readers, creating invisible traps.
Recommended values
- 0.04–0.08 — very subtle surface tint, hover state overlays
- 0.12–0.16 — border alternatives, separator lines in colour
- 0.40–0.50 — disabled state opacity
- 0.60–0.70 — modal backdrop overlay
- 0.80–0.90 — frosted glass / backdrop-filter effects
- 1 — fully opaque (default)
Common mistakes
- Using opacity: 0 to hide something — use visibility: hidden or display: none instead.
- Applying opacity to the whole button element when only the background should be transparent.
- Forgetting that opacity creates a stacking context — this can cause z-index issues.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Use opacity: 0.5 for disabled interactive elements. Use rgba(0,0,0,0.6) for modal backdrops. Use transparent border colours (hsl(210 40% 90% / 0.8)) for subtle dividers rather than solid grey.