CSS opacity property

Introduction

opacity is a CSS3 property used to control the transparency of an element. Transparency refers to how transparent an element appears; higher transparency means it’s transparent, while lower transparency means it’s opaque. By adjusting the transparency of an element, you can create a more layered look and make text easier to read.

Syntax

opacity takes a numeric value between 0 and 1. Lower values ​​make the element more transparent, while higher values ​​make it less transparent. The syntax is as follows:

opacity: <number>; 

Example

Achieving a Translucent Effect

By setting the transparency of an element, you can make it appear translucent. For example, the following code implements a rectangle with a semi-transparent background color:

<div class="box">Translucent rectangular background</div>

.box {
background-color: #007acc;
opacity: 0.5;
color: #fff;
padding: 10px;
}

Achieving a frosted glass effect

By nesting multiple elements and adding translucency to their backgrounds, you can achieve a frosted glass effect. For example, the following code creates a frosted glass effect for an avatar:

<div class="avatar">
<div class="mask"></div>
<img src="https://i.imgur.com/https://coder-cafe.com/wp-content/uploads/2025/09/8fqneQd.png" alt="avatar">
</div>

.avatar {
position: relative;
overflow: hidden;
width: 120px;
height: 120px;
border-radius: 50%;
margin: 0 auto;
}

.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5); 
} 

.avatar img { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
object-fit: cover; 
border-radius: 50%; 
} 

The Effect of Transparency on Child Elements

opacity The property not only affects the transparency of the element itself, but also affects the child elements within it. For example, consider the following code:

<div class="parent">
<div class="child">child element</div>
</div>

.parent {
background-color: #007acc;
opacity: 0.5;
padding: 10px;
}

.child {
background-color: #fff;
padding: 10px;
color: #000;
}

Although the .child element doesn’t have the opacity attribute set, its text still appears translucent, which is not what we want. If you want the parent element to be semi-transparent without affecting the text of the child element, you can use the rgba function, which is also called a color value with transparency. For example, consider the following code:

<div class="parent">
<div class="child">child element</div>
</div>

.parent {
background-color: rgba(0, 122, 204, 0.5);
padding: 10px;
}

.child {
background-color: #fff;
padding: 10px;
color: #000;
}

This time, the .parent element will have a transparent background color, while the text within the .child element will no longer be affected by the transparency. This achieves the desired effect.

Notes

1. Because transparency affects all child elements within an element, be careful when setting the opacity property. If you only want the parent element to be semi-transparent without affecting its children, use the rgba function.
2. The opacity property is inherited; if a parent element has the opacity property set, all its child elements will be affected.
3. If you use JavaScript or jQuery to dynamically adjust the transparency of an element, it’s recommended to use the rgba function instead of the opacity property, as the latter is more efficient in advanced browsers.

Conclusion

The opacity property can make elements appear more layered and create many interesting effects, such as semi-transparency and frosted glass. However, be aware of its impact range to avoid unnecessary problems. If you only want the element to be transparent without affecting child elements, use the rgba function to set the background color.