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 value1
  • Applies toAll elements
  • InheritedNo
  • MediaVisual
  • Computed valueThe same as the specified value after clipping the [alphavalue] to the range [0.0,1.0]
  • AnimatableNo
  • CSS VersionCSS3
  • JavaScript syntaxobject.style.opacity

Syntax

Formal syntax: <alphavalue> | inherit

opacity: 1.0;
opacity: 0.5;

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

.class {
   opacity: 0.5;
}

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

1+Firefox9+Explorer1+Chrome1.2+Safari9+Opera

Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.