CSS3 opacity Property


Example

Set the opacity level for a <div> element:

div {
    opacity: 0.5;
}

Try it yourself »

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 transparant at all, 0.5 is 50% see-through, and 0 is completely transparent.

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


Examples

More Examples

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 Image Opacity / Transparency

HTML DOM reference: opacity property



Color Picker

colorpicker