CSS3 opacity Property
More "Try it Yourself" examples below.
Definition and Usage
The opacity property sets the opacity level for an element.
The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.
Note: When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read. If you do not want to apply opacity to child elements, use RGBA color values instead (See "More Examples" below).
Default value: | 1 |
---|---|
Inherited: | no |
Animatable: | yes, see individual properties. Read about animatable Try it |
Version: | CSS3 |
JavaScript syntax: | object.style.opacity="0.5" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Property | |||||
---|---|---|---|---|---|
opacity | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Note: IE8 and earlier versions supports an alternative, the filter property. Like: filter:Alpha(opacity=50).
CSS Syntax
opacity: number|initial|inherit;
Property Values
Value | Description | Play it |
---|---|---|
number | Specifies the opacity. From 0.0 (fully transparent) to 1.0 (fully opaque) | Play it » |
initial | Sets this property to its default value. Read about initial | Play it » |
inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
Example
If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following will set the opacity for the background color and not the text:
100% opacity
60% opacity
30% opacity
10% opacity
Tip: Learn more about RGBA Colors in CSS3 RGBA Colors.
Example
How to use JavaScript to change the opacity for an element:
function myFunction(x) {
// Return the text of the selected option
var opacity = x.options[x.selectedIndex].text;
var el = document.getElementById("p1");
if (el.style.opacity !== undefined) {
el.style.opacity = opacity;
} else {
alert("Your browser doesn't support this example!");
}
}
Try it Yourself »
Related Pages
CSS Tutorial: CSS Opacity / Transparency
CSS Tutorial: CSS3 RGBA Colors
HTML DOM Reference: opacity property