CSS Opacity
CSS Opacity
CSS Opacity Property
The CSS opacity property controls the transparency of an element. Transparency determines how much of a hidden element’s content is visible.
You can use the opacity property on a variety of elements, whether they contain text, https://coder-cafe.com/wp-content/uploads/2025/09/images, or serve as backgrounds.
This property is used to create various visual effects, such as fading in and out, creating overlays, or reducing the visibility of background https://coder-cafe.com/wp-content/uploads/2025/09/images.
Syntax
This chapter introduces the use of the CSS transparency property, which can take one of the following values: −
- number− Expressed as a decimal between 0 and 1.
-
percentage− Expressed as a percentage between 0% and 100%.
The following table shows different transparency values:
| Value | Description |
|---|---|
| 0 | The element is completely transparent and invisible. |
| 0.5 | The element is semi-transparent. |
| 1 | The element is completely opaque and visible. |
CSS Opacity – Values
By setting the opacity property (opacity) of an element to a value between 0 and 1, we can make the background of an element partially transparent while still allowing the text inside to be visible.
Here is an example –
<html>
<head>
<style>
div {
background-color: #d3360b;
opacity: 0.4;
padding: 10px;
width: 150px;
height: 110px;
}
</style>
</head>
<body>
<div>
<h3>CSS Opacity to 0.4</h3>
</div>
</body>
</html>
CSS Opacity – Percentages
You can also use the opacity property to set the value as a percentage Makes an element’s background partially transparent by setting its opacity property to a value between 0% and 100%.
The following is an example −
<html>
<head>
<style>
.my-opacity {
background-color: #d3360b;
opacity: 70%;
padding: 10px;
width: 150px;
height: 110px;
}
</style>
</head>
<body>
<div class="my-opacity">
<h3>CSS Opacity to 70%</h3>
</div>
</body>
</html>
CSS Image Opacity
The following example shows how to make an image partially transparent using the opacity property.
<html>
<head>
<style>
div {
display: flex
}
.first-img {
opacity: 0.1;
margin: 10px;
width: 170px;
height: 130px;
}
.second-img {
opacity: 0.5;
margin: 10px;
width: 170px;
height: 130px;
}
.third-img {
opacity: 1;
margin: 10px;
width: 170px;
height: 130px;
}
</style>
</head>
<body>
<div>
<img class="first-img" src="https://coder-cafe.com/wp-content/uploads/2025/09/images/tutimg.png" alt="Tutorialspoint">
<img class="second-img" src="https://coder-cafe.com/wp-content/uploads/2025/09/images/tutimg.png" alt="Tutorialspoint">
<img class="third-img" src="https://coder-cafe.com/wp-content/uploads/2025/09/images/tutimg.png" alt="Tutorialspoint">
</div>
</body>
</html>
CSS Transparency Image Hover Effect
The following example demonstrates how to use the transparency property to make an image transparent when the cursor hovers over it.
<html>
<head>
<style>
div {
display: flex
}
.opacity-image {
opacity: 1;
margin: 10px;
width: 170px;
height: 130px;
}
.opacity-image:hover {
opacity: 0.3;
}
</style>
</head>
<body>
<h3>Hover Over an image</h3>
<div>
<img class="opacity-image" src="https://coder-cafe.com/wp-content/uploads/2025/09/images/tutimg.png" alt="redFlower"> </div>
</body>
</html>
CSS Transparency and RGBA Color Values
The transparency property can make an element and all its children transparent. To avoid this, you can use RGBA color values, which allow you to set the transparency of a color without affecting its children.
<html>
<head>
<style>
div {
width: 200px;
padding: 10px;
text-align: center;
}
.my-opacity1 {
background-color: rgba(227, 220, 11);
opacity: 0.1;
}
.my-opacity2 {
background-color: rgba(227, 220, 11);
opacity: 0.3;
}
.my-opacity3 {
background-color: rgba(227, 220, 11);
opacity: 0.6;
}
.my-opacity4 {
background-color: rgba(227, 220, 11);
opacity: 0.9;
}
.rgba-opacity1 {
background-color: rgba(227, 220, 11, 0.1);
}
.rgba-opacity2 {
background-color: rgba(227, 220, 11, 0.3);
}
.rgba-opacity3 {
background-color: rgba(227, 220, 11, 0.6);
}
.rgba-opacity4 {
background-color: rgba(227, 220, 11, 0.9);
}
.transparent-container {
margin-left: 50px;
float: left;
}
.regba-container {
margin-left: 50px;
float: left;
}
</style>
</head>
<body>
<div class="transparent-container">
<h4>Tranparent element</h4>
<div class="my-opacity1">
CSS Opacity 0.1
</div>
<div class="my-opacity2">
CSS Opacity 0.3
</div>
<div class="my-opacity3">
CSS Opacity 0.6
</div>
<div class="my-opacity4">
CSS Opacity 0.9
</div>
</div>
<div class="regba-container">
<h4>With RGBA color values</h4>
<div class="rgba-opacity1">
CSS Opacity 10%
</div>
<div class="rgba-opacity2">
CSS Opacity 30%
</div>
<div class="rgba-opacity3">
CSS Opacity 60%
</div>
<div class="rgba-opacity4">
CSS Opacity 90%
</div>
</div>
</body>
</html>
The following example shows how the opacity of an element changes to a specified value when the user clicks a button.
<html>
<head>
<style>
.opacity-container {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.opacity-button {
background-color: #0cc42b;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
width: 90px;
height: 40px;
}
#heading {
background-color: #d7e20c;
width: 250px;
padding: 5px;
transition: opacity 0.3s ease;
text-align: center;
margin-left: 35%; }
</style>
</head>
<body>
<p>Click the buttons to see how the opacity changes.</p>
<div class="opacity-container">
<button class="opacity-button" onclick="changeOpacity(0)">0 opacity</button>
<button class="opacity-button" onclick="changeOpacity(0.3)">0.3 opacity</button>
<button class="opacity-button" onclick="changeOpacity(0.6)">0.6 opacity</button>
<button class="opacity-button" onclick="changeOpacity(0.9)">0.9 opacity</button>
<button class="opacity-button" onclick="changeOpacity(1)">1.0 opacity</button>
</div>
<h3 id="heading">Tutorialspoint CSS Opacity</h3>
<script>
function changeOpacity(opacityValue) {
var selectElement = document.getElementById("heading");
selectElement.style.opacity = opacityValue;
}
</script>
</body>
</html>