CSS opacity Property

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 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 propertiesRead about animatable – Try it
Version: CSS3
JavaScript syntax: object.style.opacity=”0.5″ Try it
CSS Syntax
opacity: number|initial|inherit;
Property Values
Value Description
number Specifies the opacity. From 0.0 (fully transparent) to 1.0 (fully opaque)
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

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 »