CSS-Home CSS-Environment CSS-Basic syntax CSS-Selector CSS-How To Add CSS CSS-Comment CSS-Color CSS-Background CSS-Font CSS-Text CSS-Boarder CSS-Margin CSS-Padding CSS-Height/Width CSS-Link CSS-Table CSS-Visibility CSS-Scrollable CSS-Float/Clear CSS-Line CSS-Align CSS-Dimension CSS-Event CSS-Pusedo class CSS-Position CSS-Transparency CSS-Dropdown CSS-Form CSS-List/Counter CSS-Website layout CSS-Text effect CSS-Image effect CSS-Button effect CSS-page number CSS-Box CSS-@media CSS-Multi device CSS-Multi device 1 CSS-Multi device 2

CSS - Transparency / Opacity

The CSS opacity property is used to specify the transparency of an element.

The CSS transparency / opacity property specifies the clarity of the image.

CSS opacity setting is applied uniformly across the entire object.

You can also set opacity on texts, images , buttons etc.

CSS opacity value is defined less than 1.

Example : Transparency / Opacity

<!DOCTYPE html>
div {
background-color: blue;
padding: 10px;

div.first {
opacity: 0.1;

div.second {
opacity: 0.3;

div.third {
opacity: 0.6;
img {
opacity: 0.3;

img:hover {
opacity: 1.0;

<h1>Opacity /Transparent</h1>
<div><p>Code Always--1(default)</p></div>
<div class="first"><p>Code Always--0.1 (opacity: 0.1)</p></div>
<div class="second"><p>Code Always--0.3 (opacity: 0.3)</p></div>
<div class="third"><p>Code Always--0.6 (opacity: 0.6;)</p></div>
<img src="css.jpg" alt="Forest" width="320px" height="120">


Hover your mouse on the image below to change the value of opacity to default(1).

When the above code is compiled , it produces the following result.


Opacity /Transparent

Code Always--1(default)

Code Always--0.1 (opacity: 0.1)

Code Always--0.3 (opacity: 0.3)

Code Always--0.6 (opacity: 0.6;)