CSS3 opacity Property

Example

Set the opacity level for a div element:

div
{
opacity:0.5;
filter:Alpha(opacity=50); /* Internet Explorer */
}

Try it yourself »
More examples at the bottom of this page.

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The opacity property is supported in all major browsers, except Internet Explorer.

Internet Explorer supports an alternative, the filter property, e.g. filter:Alpha(opacity=50).


Definition and Usage

The opacity property sets the opacity level for an element.

Default value: 1
Inherited: no
Version: CSS3
JavaScript syntax: object.style.opacity=0.5


Syntax

opacity: value|inherit;

Value Description
value Specifies the opacity. From 0.0 (fully transparent) to 1.0 (fully opaque)
inherit The value of the opacity property should be inherited from the parent element


Examples

Try it Yourself - Examples

Change the opacity for an element
This example demonstrates how to use a JavaScript to change the opacity for an element.