CSS Effects
CSS Opacity
The CSS Opacity property is used to control the transparency level of an element.
Opacity determines how visible or transparent an element appears on a webpage. The supporting concepts are explained in CSS Colors and Blending & Backdrop.
The opacity value ranges from:
0-> Completely transparent (invisible)1-> Fully visible (default)
Opacity is commonly used for:
- Image hover effects
- Overlays
- Background effects
- Modern UI designs
- Fade animations
Syntax
Opacity Syntax
css
selector {
opacity: value;
}Opacity Example
css
img {
opacity: 0.5;
}Makes the image 50% transparent.
Attributes
| Value | Description | Example |
|---|---|---|
| 0 | Completely transparent | opacity: 0; |
| 0.25 | Mostly transparent | opacity: 0.25; |
| 0.5 | Semi-transparent | opacity: 0.5; |
| 0.75 | Slightly transparent | opacity: 0.75; |
| 1 | Fully visible | opacity: 1; |
Example
CSS Opacity Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>CSS Opacity Example</title>
<style>
.box {
width: 250px;
padding: 20px;
background-color: #007acc;
color: white;
opacity: 0.7;
margin-bottom: 20px;
}
img {
width: 250px;
opacity: 0.5;
transition: opacity 0.3s ease;
}
img:hover {
opacity: 1;
}
</style>
</head>
<body>
<div class="box">
This box has 70% opacity.
</div>
<img src="https://ik.imagekit.io/html5andcss3/frontend-media/html_example.webp" alt="Opacity Example">
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| opacity | 1 | 12 | 1 | 2 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
Notes
- Opacity affects the entire element, including its content.
- Child elements inherit the parent's opacity effect.
- Values must be between
0and1. - Frequently used with hover effects and overlays.
Common Opacity Levels
Common Opacity Levels
css
opacity: 0.2;
opacity: 0.5;
opacity: 0.8;
opacity: 1;Hover Effect Example
Hover Effect Example
css
img {
opacity: 0.6;
}
img:hover {
opacity: 1;
}Creates a popular image-hover effect.
Opacity vs RGBA
RGBA Background Transparency
css
background-color: rgba(0, 122, 204, 0.5);Only the background becomes transparent.
Element Opacity
css
opacity: 0.5;The entire element becomes transparent.
Conclusion
The CSS Opacity property provides a simple way to create transparency effects for elements and images. By adjusting visibility levels, you can build modern interfaces, interactive hover effects, and visually appealing overlays with minimal code.