CSS opacity Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

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: 1
Applies to: All elements
Inherited: No
Computed value: The same as the specified value after clipping the [alphavalue] to the range [0.0,1.0]
Animatable: No
JavaScript syntax: object.style.opacity

Interactive Demo

opacity: 1;

opacity: 0.4;

opacity: 80%;

opacity: 0;

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.

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

HTML

<div class="opacity"> Example of the css opacity property.</div>

CSS

body {
   background: url(images/tick.png);
}
.opacity {
   background: #ccc;
   padding: 30px;
   opacity: 0.7;
}

Result

Editor

Browser Support

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

Desktop

12	1	1	9	2

Tablets / Mobile

18	4	10.1	1	1	4.4

Last updated by CSSPortal on: 2nd January 2024

Support Us