Opacity

Next ❯Gradient

To set transparency of fill or stroke color

  • turned_in_notOpacity Related Properties
    • fill-opacity
    • stroke-opacity
    • opacity


fill-opacity

Used to set the transparency of filled color

Syntax

fill-opacity:number

fill-opacity : 0.2

<svg height="100" width="200">
  <rect x="10" y="25" width="180" height="50" 
    style="fill:red;fill-opacity:0.2"/>
</svg>
fill-opacity


stroke-opacity

Used to set the transparency of stroke color

Syntax

stroke-opacity:number

stroke-opacity : 0.2

<svg height="100" width="200">
  <rect x="10" y="25" width="180" height="50" 
    style="stroke:blue;stroke-opacity:0.2;fill:none;stroke-width:5"/>
</svg>
stroke-opacity


opacity

Used to set the transparency of both, stroke and fill color

Syntax

opacity:number

opacity : 0.2

<svg height="100" width="200">
  <rect x="10" y="25" width="180" height="50" 
    style={{stroke:"blue",opacity:0.2,fill:"red",strokeWidth:5}}/>
</svg>
opacity


  • Gradient
❮ Prev Text Design
Next ❯Gradient
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯