CSS opacity property

Definition and Usage

The opacity property sets the opacity level of an element.

See Also:

CSS Tutorial:CSS image transparency

CSS Tutorial:CSS Colors

HTML DOM Reference Manual:Opacity Property

Example

Set the opacity level of the div element:

div
{
opacity:0.5;
}

Try It Yourself

You can find more examples at the bottom of this page.

CSS Syntax

opacity: value|inherit;

Attribute Value

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

Technical Details

Default Value: 1
Inheritance: no
Version: CSS3
JavaScript Syntax: object.style.opacity=0.5

More Examples

Change the opacity of an element
This example demonstrates how to change the opacity of an element using JavaScript.

Browser Support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
4.0 9.0 2.0 3.1 9.0

Note:IE8 and earlier versions support the alternative filter attribute. For example: filter:Alpha(opacity=50).