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:

number - used to define the level of opacity. The valid values are from 0.0 to 1.0, where 0.0 is used to make the element fully transparent, and 1.0 is used to make the element fully opaque
initial - used to use the default value
inherit - used to use the value inherited by the parent element

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 »