Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Create a transparent box with CSS
Creating a transparent box in CSS allows you to make elements semi-transparent, revealing content behind them. The most common approach is using the opacity property, which controls the transparency level of an entire element.
Syntax
selector {
opacity: value;
}
Possible Values
| Value | Description |
|---|---|
0 |
Completely transparent (invisible) |
0.1 - 0.9 |
Semi-transparent (decimal values) |
1 |
Completely opaque (default) |
Example
The following example demonstrates how to create transparent boxes with different opacity levels −
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #4CAF50;
padding: 20px;
margin: 10px;
color: white;
font-weight: bold;
}
.transparent-light {
opacity: 0.7;
}
.transparent-medium {
opacity: 0.4;
}
.transparent-heavy {
opacity: 0.1;
}
</style>
</head>
<body>
<h1>Transparent Box Examples</h1>
<p>Check transparency in the boxes below:</p>
<div>
<p>Normal box (opacity: 1)</p>
</div>
<div class="transparent-light">
<p>Light transparency (opacity: 0.7)</p>
</div>
<div class="transparent-medium">
<p>Medium transparency (opacity: 0.4)</p>
</div>
<div class="transparent-heavy">
<p>Heavy transparency (opacity: 0.1)</p>
</div>
</body>
</html>
Four green boxes appear with white text, each demonstrating different transparency levels. The first box is fully opaque, while the subsequent boxes become increasingly transparent, with the last box being barely visible.
Background-Only Transparency
To make only the background transparent while keeping text opaque, use rgba() color values instead of opacity −
<!DOCTYPE html>
<html>
<head>
<style>
.background-transparent {
background-color: rgba(76, 175, 80, 0.4);
padding: 20px;
margin: 10px;
color: black;
font-weight: bold;
}
.comparison-box {
background-color: #4CAF50;
opacity: 0.4;
padding: 20px;
margin: 10px;
color: black;
font-weight: bold;
}
</style>
</head>
<body>
<div class="background-transparent">
<p>Only background is transparent (rgba)</p>
</div>
<div class="comparison-box">
<p>Entire element is transparent (opacity)</p>
</div>
</body>
</html>
Two boxes appear: the first has a transparent green background but solid black text, while the second has both background and text made semi-transparent.
Conclusion
Use the opacity property to make entire elements transparent, or rgba() colors when you need only background transparency. The opacity property accepts values from 0 (invisible) to 1 (fully opaque).
Updated on: 2026-03-15T12:26:41+05:30
890 Views
Advertisements