Skip to content
Related Articles

Related Articles

Improve Article
CSS | fill-opacity Property
  • Last Updated : 28 Nov, 2019

The fill-opacity property is used to set the opacity of the paint server that is applied to the shape.

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.

    Example:




    <!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

  • 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:




    <!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 fill-opacity property are listed below:

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :