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
9	12	1	1	9	2
Tablets / Mobile
1	18	4	10.1	1	Yes

Last updated by CSSPortal on: 16th October 2019