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"
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 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"
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 the fill-opacity property are listed below:
- Chrome
- Firefox
- Safari
- Opera
- Internet Explorer 9