CSS opacity

The CSS opacity property is used to define the level of opacity to an element. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div{background-color: green; color: white; padding: 14px;}
      div.a{opacity: 1;}
      div.b{opacity: 0.4;}
   </style>
</head>
<body>
   
   <h2>opacity: 1</h2>
   <div class="a">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
   
   <h2>opacity: 0.4</h2>
   <div class="b">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
   
</body>
</html>
Output

opacity: 1

Lorem ipsum dolor sit amet consectetur adipisicing elit.

opacity: 0.4

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

CSS opacity Syntax

The syntax of opacity property in CSS, is:

opacity: x;

The value of x should be any of the following:

CSS opacity Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div{background-color: chocolate; color: white; padding: 14px;
         margin-bottom: 10px;}
      div.a{opacity: 0;}
      div.b{opacity: 0.1;}
      div.c{opacity: 0.2;}
      div.d{opacity: 0.3;}
      div.e{opacity: 0.4;}
      div.f{opacity: 0.5;}
      div.g{opacity: 0.6;}
      div.h{opacity: 0.7;}
      div.i{opacity: 0.8;}
      div.j{opacity: 0.9;}
      div.k{opacity: 1;}
   </style>
</head>
<body>
   
   <div class="a">opacity: 0</div>
   <div class="b">opacity: 0.1</div>
   <div class="c">opacity: 0.2</div>
   <div class="d">opacity: 0.3</div>
   <div class="e">opacity: 0.4</div>
   <div class="f">opacity: 0.5</div>
   <div class="g">opacity: 0.6</div>
   <div class="h">opacity: 0.7</div>
   <div class="i">opacity: 0.8</div>
   <div class="j">opacity: 0.9</div>
   <div class="k">opacity: 1</div>
   
</body>
</html>
Output
opacity: 0
opacity: 0.1
opacity: 0.2
opacity: 0.3
opacity: 0.4
opacity: 0.5
opacity: 0.6
opacity: 0.7
opacity: 0.8
opacity: 0.9
opacity: 1

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!