Open In App

How to set the opacity level for a division element using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will set the opacity of an element using CSS. Opacity is the property of an element that 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 transparency and a high value represents low transparency. The percentage of opacity is calculated as Opacity% = Opacity * 100.

Example 1: This example uses the CSS style tag to give the value of opacity to the HTML element using the ID selector.

HTML




<style>
    body {
        text-align: center;
    }
      
    h1 {
        color: green;
    }
      
    .GFG {
        opacity: 0.5;
    }
</style>
  
<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>


Output:

Example 2: This example uses the Javascript function and CSS style tag to set the opacity of the HTML element. 

HTML




<style>
    body {
        text-align: center;
    }
      
    h1 {
        color: green;
    }
</style>
  
<script>
    function fun() {
        document.getElementById("GFG")
            .style.opacity = "0.5";
    
</script>
  
<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>


Output:

 



Last Updated : 11 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads