Skip to content
Related Articles

Related Articles

How to set the opacity level for a division element using CSS ?
  • Last Updated : 31 Dec, 2020

In this article, we will set the opacity of an element using CSS. Opacity is the property of an element which describes the transparency of the element. 

The opacity property is used to describe the transparency of the element. The value of opacity lies between 0.0 to 1.0 where a low value represents high transparent and high value represents low transparent. The percentage of opacity is calculated as Opacity% = Opacity * 100.

Example 1:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        How to set the opacity level for
        a division element using CSS?
    </title>
    <style>
        body {
            text-align: center;
        }
  
        h1 {
            color: green;
        }
  
        .GFG {
            opacity: 0.5;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <h3>
        How to set the opacity level for
        <br>a division element using CSS?
    </h3>
  
    <div class="GFG">
        Welcome to GeeksforGeeks
    </div>
</body>
  
</html>

chevron_right


Output:



Example 2:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        How to set the opacity level for
        a division element using CSS?
    </title>
    <style>
        body {
            text-align: center;
        }
  
        h1 {
            color: green;
        }
    </style>
  
    <script>
        function fun() {
            document.getElementById("GFG")
                .style.opacity = "0.5";
        
    </script>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <h3>
        How to set the opacity level for
        <br>a division element using CSS?
    </h3>
  
    <div id="GFG">
        Welcome to GeeksforGeeks
    </div>
  
    <button type="button" onclick="fun()">
        Submit
    </button>
</body>
  
</html>

chevron_right


Output:

Before Button Click:

After Button Click:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :