CSS opacity Property

Description

The opacity property can be thought of conceptually as a post processing operation. Conceptually, after the element (including its descendants) is rendered into an RGBA offscreen image, the opacity setting specifies how to blend the offscreen rendering into the current composite rendering.

Initial value
1
Applies to
All elements
Inherited
No
Media
Visual
Computed value
The same as the specified value after clipping the [alphavalue] to the range [0.0,1.0]
Animatable
No
CSS Version
CSS3
JavaScript syntax
object.style.opacity

Syntax

opacity: <alphavalue> | inherit

Values

  • <alphavalue>A floating-point value between 0.0 (fully transparent) and 1.0 (fully opaque), inclusive. Any values outside the range will be clamped to this range.
  • inherit

Example

<div class="opacity"> Example of the css opacity property.</div>
body {
   background: url(images/tick.png);
}
.opacity {
   background: #ccc;
   padding: 30px;
   opacity: 0.7;
}

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
9121192
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
118410.11Yes