CSS opacity Property


The CSS opacity property controls the transparency of an element in a web page. It accepts values ranging from 0 (completely transparent) to 1 (fully opaque). When you set the opacity of an element to a value between 0 and 1, it affects not only the element itself but also its content, making everything within it more or less transparent. This property is commonly used for creating various visual effects, such as fading elements in and out or creating overlays with reduced opacity. It's important to note that changing an element's opacity can impact its interaction and visibility, so it should be used judiciously in web design to maintain a good user experience.

Initial value
Applies to
All elements
Computed value
The same as the specified value after clipping the [alphavalue] to the range [0.0,1.0]
JavaScript syntax

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff.


opacity: <alphavalue> | inherit


  • <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


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

Browser Support

The following table will show you the current browser support for the CSS opacity property.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 2nd January 2024