CSS opacity Property

CSS opacity property specifies the transparency level of an element.

The value of the opacity ranges from 0 to 1. The lower the value of the opacity, the higher the level of transparency.

The opacity value 0 specifies that the element will become fully transparent and opacity value 1 specifies that the element will not be transparent at all. The opacity: 0.5; will make the element 50% transparent. Refer to the example below:

Example:

.div1{
  opacity: 1;
}
.div2{
  opacity: 0.5;
}
.div3{
  opacity: 0.1;
}

CSS Syntax

The opacity property has the below syntax:

opacity: number|initial|inherit;

Property Values

The opacity property accepts the following values:

numberThe default value is 1. Specifies the opacity level. It ranges from 0 to 1. The lower the value, the higher the transparency.
initialSets the opacity property to its default value(1).
inheritInherits the opacity property from the parent element.

General Info

Default Value1
InheritedNo
JavaScript Usageelement.style.opacity = “0.5”;