CSS Opacity
What is CSS Opacity?
The CSS opacity property controls the transparency of an HTML element. It accepts values from 0 to 1, where 0 makes the element completely transparent (invisible) and 1 makes it fully visible. Any value between 0 and 1 creates different levels of transparency.
Why Use CSS Opacity?
The opacity property is commonly used to create modern UI effects, image hover animations, overlays, disabled buttons, transparent cards, and smooth visual transitions. It helps improve the appearance of a webpage without modifying the original image or content.
Opacity Values
Basic Opacity Syntax
<!DOCTYPE html>
<html>
<head>
<style>
.box{
opacity:0.5;
}
</style>
</head>
<body>
<div class="box">
Opacity Example
</div>
</body>
</html>Step 1: Make an Element Semi-Transparent
Set the opacity value between 0 and 1 to control how transparent an element appears.
<!DOCTYPE html>
<html>
<head>
<style>
.box{
width:220px;
padding:20px;
background:#007BFF;
color:white;
opacity:0.5;
}
</style>
</head>
<body>
<div class="box">
This box is 50% transparent.
</div>
</body>
</html>Step 2: Image Transparency
The opacity property can make images transparent without editing the original image.
<!DOCTYPE html>
<html>
<head>
<style>
img{
opacity:0.6;
}
</style>
</head>
<body>
<img src="https://picsum.photos/300/180"
alt="Sample Image">
</body>
</html>Step 3: Hover Effect Using Opacity
A common effect is making an image slightly transparent and restoring full visibility when the user hovers over it.
<!DOCTYPE html>
<html>
<head>
<style>
img{
opacity:0.5;
transition:0.4s;
}
img:hover{
opacity:1;
}
</style>
</head>
<body>
<img src="https://picsum.photos/300/180"
alt="Nature">
</body>
</html>Step 4: Transparent Button
Buttons can use opacity to create a disabled or subtle appearance.
<!DOCTYPE html>
<html>
<head>
<style>
button{
padding:12px 20px;
background:#28a745;
color:white;
border:none;
opacity:0.7;
}
button:hover{
opacity:1;
}
</style>
</head>
<body>
<button>
Hover Me
</button>
</body>
</html>Step 5: Transparent Card
Opacity can create modern transparent cards and overlay effects.
<!DOCTYPE html>
<html>
<head>
<style>
body{
background:#f0f4ff;
}
.card{
width:260px;
padding:20px;
background:#007BFF;
color:white;
opacity:0.8;
}
</style>
</head>
<body>
<div class="card">
<h3>Welcome</h3>
<p>
This card uses CSS opacity.
</p>
</div>
</body>
</html>Complete CSS Opacity Example
<!DOCTYPE html>
<html>
<head>
<style>
img{
width:300px;
opacity:0.5;
transition:0.5s;
}
img:hover{
opacity:1;
}
button{
margin-top:20px;
padding:12px 22px;
background:#007BFF;
color:white;
border:none;
opacity:0.7;
}
button:hover{
opacity:1;
}
</style>
</head>
<body>
<img src="https://picsum.photos/300/180"
alt="Landscape">
<br>
<button>
Learn CSS
</button>
</body>
</html>Advantages of CSS Opacity
Best Practices
- Use opacity values only between 0 and 1.
- Combine opacity with transition for smooth hover effects.
- Avoid making important text too transparent.
- Use opacity for decorative effects, overlays, and image galleries.
- Remember that opacity affects the entire element and its children.
- Test transparency on different background colors.
- Keep sufficient contrast for accessibility.
- Use RGBA colors instead of opacity when only the background should be transparent.
Web Resources on CSS Opacity
1. MDN Web Docs : opacity CSS property
2. MDN Web Docs : opacity() CSS function
3. CSS Tricks.com : opacity
4. Dev.to : How to Change Background Opacity without Affecting Text
🧪 Test Your CSS Code
Edit the CSS code on the left and click “Run Code” to see the result on the right.
Click “Run Code” to see the result here.