CSS | stroke-opacity Property

The stroke-opacity property is used to set the opacity of the color or pattern that is applied to the stroke of a shape. A decimal or percentage value could be used to make the stroke visible, invisible or semi-transparent.

Syntax:

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

Parameters: This property accepts two types of parameters as mentioned above and described below:



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

Below examples will illustrates the stroke-opacity property in CSS:

Example 1: This example uses a value 0 to 1 to set the stroke opacity.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | stroke-opacity property
    </title>
  
    <style>
        .stroke1 {
              
            /* completely visible stroke */
            stroke-opacity: 1.0;
            stroke: green;
            stroke-width: 20px;
        }
              
        .stroke2 {
              
            /* 50-50 visible transparent */
            stroke-opacity: 0.5;
            stroke: green;
            stroke-width: 20px;
        }
          
        .stroke3 {
              
            /* 25-75 visible transparent */
            stroke-opacity: 0.25;
            stroke: green;
            stroke-width: 20px;
        }
          
        .stroke4 {
              
            /* completely transparent stroke */
            stroke-opacity: 0;
            stroke: green;
            stroke-width: 20px;
        }
    </style>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        CSS | stroke-opacity
    </b>
      
    <div class="container">
  
        <!-- Strokes lines-->
        <svg width="400px">
            <line class="stroke1" x1="50"
                    x2="350" y1="20" y2="20" />
              
            <line class="stroke2" x1="50"
                    x2="350" y1="70" y2="70" />
              
            <line class="stroke3" x1="50"
                    x2="350" y1="120" y2="120" />
              
            <line class="stroke4" x1="50"
                    x2="350" y1="170" y2="170" />
        </svg>
    </div>
</body>
  
</html>

chevron_right


Output:
decimal-val

Example 2: This example uses percentage value to set the stroke opacity.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | stroke-opacity property
    </title>
      
    <style>
        .stroke1 {
              
            /* completely visible stroke */
            stroke-opacity: 100%;
            stroke: green;
            stroke-width: 20px;
        }
          
        .stroke2 {
              
            /* 50-50 visible transparent */
            stroke-opacity: 50%;
            stroke: green;
            stroke-width: 20px;
        }
          
        .stroke3 {
              
            /* 25-75 visible transparent */
            stroke-opacity: 25%;
            stroke: green;
            stroke-width: 20px;
        }
          
        .stroke4 {
              
            /* completely transparent stroke */
            stroke-opacity: 0%;
            stroke: green;
            stroke-width: 20px;
        }
    </style>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        CSS | stroke-opacity
    </b>
      
    <div class="container">
  
        <!-- Strokes lines-->
        <svg width="400px">
            <line class="stroke1" x1="50"
                    x2="350" y1="20" y2="20" />
              
            <line class="stroke2" x1="50"
                    x2="350" y1="70" y2="70" />
              
            <line class="stroke3" x1="50"
                    x2="350" y1="120" y2="120" />
              
            <line class="stroke4" x1="50"
                    x2="350" y1="170" y2="170" />
        </svg>
    </div>
</body>
  
</html>

chevron_right


Output:
decimal-val

Supported Browsers: The browsers supported by CSS stroke-opacity property are listed below:

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



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.