Opacity & Transparency
Make elements see-through with opacity and alpha colors.
Syntax
opacity: 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
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.
.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.
.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.
.modal {
opacity: 0;
transition: opacity 0.3s ease;
}
.modal.is-open {
opacity: 1;
}
Discussion