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:
| number | The default value is 1. Specifies the opacity level. It ranges from 0 to 1. The lower the value, the higher the transparency. |
| initial | Sets the opacity property to its default value(1). |
| inherit | Inherits the opacity property from the parent element. |
General Info
| Default Value | 1 |
| Inherited | No |
| JavaScript Usage | element.style.opacity = “0.5”; |
