Open In App

CSS fill-opacity Property

Last Updated : 08 Jun, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

The fill-opacity property is used to set the opacity of the paint server that is applied to the shape. basically is used to set the opacity level of the fill color of an SVG shape. It determines the transparency of the fill, with a value between 0 and 1, where 0 represents completely transparent and 1 represents completely opaque. 

Syntax:

fill-opacity: [0-1] | <percentage>

Property Values:

  • Value between 0 and 1: It is used to set the opacity of the fill-in decimal values. The value 0 means that the fill is completely transparent and invisible. The value 1 means that the fill is fully opaque and visible. A decimal value between these two values would give a semi-transparent fill. 
  • percentage: It is used to set the opacity of the fill-in percentage values. A value of 0% means that the fill is completely transparent and invisible. A value of 100% means that the fill is fully opaque and visible. A percentage value between these two values would give a semi-transparent fill. 

Example 1: In this example, we are using property Values between 0 and 1.

html




<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | fill-opacity
    </title>
    <style>
        .opacity1 {
            /* completely
        visible fill */
            fill-opacity: 1.0;
 
            fill: green;
        }
 
        .opacity2 {
            fill-opacity: 0.5;
 
            fill: green;
        }
 
        .opacity3 {
            fill-opacity: 0.25;
 
            fill: green;
        }
 
        .opacity4 {
            /* completely
        transparent fill */
            fill-opacity: 0;
 
            fill: green;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>
        CSS | fill-opacity
    </b>
    <div class="container">
        <svg height="250px"
             width="500px"
             xmlns="http://www.w3.org/2000/svg"
             version="1.1">
            <circle class="opacity1" cx="100" cy="100" r="50" />
            <circle class="opacity2" cx="250" cy="100" r="50" />
            <circle class="opacity3" cx="400" cy="100" r="50" />
            <circle class="opacity4" cx="400" cy="100" r="50" />
        </svg>
    </div>
</body>
</html>


Output:

 in-values

Example 2: In this example, we are using property Values in percentage.

html




<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | fill-opacity
    </title>
    <style>
        .opacity1 {
            /* completely visible
        fill */
            fill-opacity: 100%;
 
            fill: green;
        }
 
        .opacity2 {
            fill-opacity: 50%;
 
            fill: green;
        }
 
        .opacity3 {
            fill-opacity: 25%;
 
            fill: green;
        }
 
        .opacity4 {
            /* completely
        transparent fill */
            fill-opacity: 0%;
 
            fill: green;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>
        CSS | fill-opacity
    </b>
    <div class="container">
        <svg height="250px"
             width="500px"
             xmlns="http://www.w3.org/2000/svg"
             version="1.1">
            <rect class="opacity1" x="25" y="10" height="150" width="100" />
            <rect class="opacity2" x="175" y="10" height="150" width="100" />
            <rect class="opacity3" x="325" y="10" height="150" width="100" />
            <rect class="opacity4" x="325" y="10" height="150" width="100" />
        </svg>
    </div>
</body>
</html>


Output: 

in-percentage

Supported Browsers: The browser supported by the fill-opacity property are listed below:

  • Chrome
  • Firefox
  • Safari
  • Opera
  • Internet Explorer 9


Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads