❮❮ PREV NEXT ❯❯

CSS - Opacity

The opacity property in CSS is used to set the opacity of an HTML element. In other words using opacity property, we can give a blur effect to an HTML element.

Opacity property in CSS

The opacity property determines the transparency of an HTML element.

The opacity property can take a numeric value(i.e. From 0.0 to 1.0) and value in persentage(i.e. Form 0% to 100%).

Numeric values with opacity property in CSS

The opacity property can take numeric values ranging from 0.0 to 1.0.

Example :

<html>
<head>
	<style>
		img {
  			opacity: 0.5;
		}
	</style>
</head>
<body>
	<p>
		<img src="my_image.png" width="250" height="150">
	</p>
</body>
</html>

Output :

So, if you look at the above output, the image has a blur effect.

That is because we have set the value of opacity property to 0.5 for the <img> element.

img {
	opacity: 0.5;
}

You can give any other value from 0.0 to 1.0 get less or more blur effect.

Persentage values with opacity property in CSS

The opacity property can take values in persentage ranging from 0% to 100%.

Let us rewrite the above example using the values in persentage.

Example :

<html>
<head>
	<style>
		img {
  			opacity: 50%;
		}
	</style>
</head>
<body>
	<p>
		<img src="my_image.png" width="250" height="150">
	</p>
</body>
</html>

Output :

So, if you look at the above output, the image has a blur effect. In other words it is 50% blur.

That is because we have set the value of opacity property to 50% for the <img> element.

img {
	opacity: 50%;
}

Similarly, opacity property can be applied on a <div> element as well.

Opacity property on <div> element

So, to demonstrate opacity property on <div> element, we will be creating a box that is black in color and apply opacity on that.

Example :

<html>
<head>
	<style>
		div {
  			background-color: black;
  			height: 100px;
  			width: 200px;
		}
		
		div.opacity30 {
  			opacity: 30%;
  		}	
	</style>
</head>
<body>
	<div> No opacity </div>
	<br>
	<div class="opacity30"> No opacity </div>
</body>
</html>

Output :

So, in the above example, we have two <div> elements which has height 100px and width 200px. And are black in color.

div {
	background-color: black;
	height: 100px;
	width: 200px;
}

Now, for the second <div> element(i.e. With class name opacity30),

<div class="opacity30"> No opacity </div>

We have set the opacity to 30%.

div.opacity30 {
	opacity: 30%;
}

Now, if you compare both the boxes, the first box is black in color. And the second box has a blur or transparent effect because of the opacity set to 30%.

❮❮ PREV NEXT ❯❯