CSS Opacity

CSS Opacity/ Transparency

The opacity CSS property specifies the transparency of an element.

The opacity-level describes the transparency-level, it ranges from 0.0 to 1.0. The level 0.0 is completely transparent, 0.5 is 50% see-through and level 1.0 is not transparent. Opacity has a default initial value of 1 (100% opaque).

CSS Opacity in Firefox, Safari, Chrome, Opera and IE9

Here is the most up to date syntax for CSS opacity in all current browsers.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
p {
  opacity: 0.7;
  padding: 10px;
  background: #00ff00;
}
</style>
</head>
<body>
<p>This paragraph is 70% opaque (or 30% transparent). Play with opacity value to see how it works.</p>
</body>
</html>
Try it with the Editor

The above style rule will make the paragraph element 70% opaque (or 30% transparent).

The opacity property takes a value a value from 0.0 to 1.0. A setting of opacity: 1; would make the element completely opaque (i.e. 0% transparent), whereas opacity: 0; would make the element completely transparent (i.e. 100% transparent).

CSS Opacity in Internet Explorer 8 and lower

Internet Explorer 8 and earlier version supports a Microsoft-only property "alpha filter" to control the transparency of an element.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
p {
   filter: alpha(opacity=50);
   zoom: 1;  /* Fix for IE7 */
}
</style>
</head>
<body>
<p>Note: Alpha filters is Microsoft-only property to control transparency in IE8 and earlier version, however this create invalid code in your CSS.</p>
</body>
</html>
Try it with the Editor

CSS Image Opacity

You can also make transparent images using CSS Opacity.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
img {
    opacity: 0.3;
    filter: alpha(opacity=30); /* For IE 8 & 9 (more valid) */
}
</style>
</head>
<body>
<img src="img/duck.png" width="192" height="191" alt="transparent image">
</body>
</html>
Try it with the Editor

Change Image Opacity on Mouse Over

The following example demonstrates a common use of CSS image opacity, where the opacity of images changes when the user moves the mouse pointer over an image.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
img {
    opacity: 1.0;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}
img:hover {
    opacity: 0.5;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
</style>
</head>
<body>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
</body>
</html>
Try it with the Editor

Text in Transparent Box

When using opacity on an element not only the background of the element that will have transparency, but all of its child elements become transparent as well. It is making the text inside the transparent element hard to read if the value of opacity becomes higher.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
.sq{
	width:100px;
	height:100px;
	background:orange;
	border: 1px solid black;
	float:left;
	align:center;
	opacity:1.0;
}
.sq1{
	width:100px;
	height:100px;
	background:orange;
	border: 1px solid black;
	float:left;
	align:center;
	opacity:0.5;
}
</style>
</head>
<body>
<div class="sq">
  opacity 1.0
</div>
<div class="sq1">
  opacity 0.5
</div>
</body>
</html>
Try it with the Editor

Transparent Border

In CSS you can make your image border transparent.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
.duck
{
	width:190px;
	height:190px;
	background: url(img/duck.png) no-repeat;
	border:5px solid #000000;}
.trBorder {
    height: 120px;
    width: 120px;
    margin: 30px;
    border: 10px solid rgba(255,255,255,.5);
}
</style>
</head>
<body>
<div class="duck">
          <div class="trBorder"> 
          </div>  
</div>
</body>
</html>
Try it with the Editor

Transparent Box

The following program shows a transparent box over the image and you can write your text in the Transparent Box.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
.duck
{
	width:190px;
	height:190px;
	background: url(img/duck.png) no-repeat;
	border:5px solid #000000;
	font-size: 30px;
	font-weight: 900;
	color:blue;
}
.trBorder {
    height: 150px;
    width: 150px;
    margin: 20px;
    background: rgba(255,255,255,.5);
}
</style>
</head>
<body>
<div class="duck">
          <div class="trBorder" align=center> 
                123RF
          </div>  
</div>
</body>
</html>
Try it with the Editor

Transparent Text

The following program using a tricky way to appear text as transparent.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
.tab
{
	width:192px;
	height:191px;
	background: url(img/duck.png) no-repeat;
	border:5px solid #000000;
	font-size: 70px;
	color:rgba(255,255,255,.5);
	font-weight: 900;
}
.trBorder {
    height: 120px;
    width: 120px;
    margin: 30px;
    border: 10px solid rgba(255,255,255,.5);
}
</style>
</head>
<body>
<div class="duck">
          shutterstock
</div>
</body>
</html>
Try it with the Editor