CSS Opacity

Opacity Property
An element's opacity can be set using the opacity property. Values can be anywhere from 0.0 (transparent) to 1.0 (opaque).
Example Usage
<div style="opacity:0.8;">
This is a partially transparent element
</div>
Property Value Transparency
- opacity: 1.0; Opaque
- opacity: 0.75; 25% transparent (75% Opaque)
- opacity: 0.5; 50% transparent (50% Opaque)
- opacity: 0.25; 75% transparent (25% Opaque)
- opacity: 0.0; Transparent
IE Compatibility for `opacity`
To use opacity in all versions of IE, the order is:
.transparent-element {
/* for IE 8 & 9 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; // IE8
/* works in IE 8 & 9 too, but also 5, 6, 7 */
filter: alpha(opacity=60); // IE 5-7
/* Modern Browsers */
opacity: 0.6;
}
ATutorialHub Related Guide
Comments (9)
User Comments

panduranga gupta
2021-07-05 07:03:13good website for learning and help me a lot

raju
2021-09-25 14:58:47The awsome website i am looking like for a long time, good work atutorialhub team keep doing

Shivani
2021-09-01 15:03:56Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

Harshitha
2021-09-10 15:05:45It is very helpful to students and easy to learn the concepts

Sowmya
2021-09-14 15:06:41Great job Tutorials are easy to understand Please make use of it

Zain Khan
2021-09-18 15:07:23Great content and customized courses.

Rudrakshi Bhatt
2021-09-09 15:08:10Well structured coursed and explained really well!

Pavana Somashekar
2021-09-11 15:09:08Good platform for beginners and learn a lot on this website

Sax
2021-09-25 19:35:50Nice website
Leave a Comment