CSS | fill-opacity Property

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:
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:
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:
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:
Supported Browsers: The browser supported by fill-opacity property are listed below:
Chrome
Firefox
Safari
Opera
Internet Explorer 9
CSS-Properties
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.