Opacity Property
Last updated: 2026-09-13
opacity Opacity Property
The opacity property sets the overall transparency of an element, with values ranging from 0 to 1. 0 is fully transparent and 1 is fully opaque. Unlike a transparent background, opacity affects the element and all of its content, making it common for fade-in/out effects and visual hierarchy.
| Category | |
|---|---|
| Initial Value | 1 |
| Inherited | No |
| Applies To | all |
| Animation Type | number |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
opacity: <number [0,1]>;⚙️ Values
| Value | Type | Description |
|---|---|---|
<number [0,1]> | Type | 0 fully transparent, 1 fully opaque |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| opacity | ✓ v25 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v15 |
| Supported in all major browsers | |||||
Warning： opacity affects the entire element including its children; to make only the background transparent, use rgba or hsla colors instead.
Tip： opacity is a transitionable property, often used to create fade-in and fade-out animations.
❓ FAQ
QWhat is the difference between opacity and rgba transparency?
Aopacity applies to the whole element, making the background, text, borders, and all children transparent together, and it creates a new stacking context. rgba() only affects the alpha channel of the single property you specify (such as the background color), leaving text and children opaque. Use rgba() when you want a translucent background with clear text, and opacity when you want to fade the whole element.
QWhat is the difference between opacity: 0 and display: none?
AWith opacity: 0 the element still occupies space, remains clickable, can participate in transitions, and screen readers can still read its content. With display: none the element is removed from the document flow entirely — no space, no interaction, no readable content. Fade animations should use opacity; use display: none only when you want to remove the element completely.
QWhat is the difference between opacity: 0 and visibility: hidden?
ABoth make an element invisible and unclickable, but opacity: 0 keeps the space, remains readable by screen readers, and supports smooth transitions. visibility: hidden keeps the layout space but hides the content from assistive technology as well and cannot be animated smoothly. Use opacity for animation and visibility: hidden for simple hiding.
QWhy are opacity animations smoother?
Aopacity is a compositing property: the browser blends it on the compositor thread without triggering layout or paint, so it easily reaches 60fps. Modifying top or left, by contrast, forces reflow and repaint. Fade-in/out and hover reveal effects fit opacity with transition well. Note that opacity creates a stacking context, which can affect how fixed elements stack.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
