VML Fill Types

Gradient - GradientRadial - Pattern - Tile - Frame

Fill Type

  • Gradient
  • GradientCenter
  • GradientRadial
  • Pattern Image Src Required
  • Tile Image Src Required
  • Frame Image Src Required

Gradient

<v:roundrect style="position:relative;left:250px;top:0px;width:100px;height:75px" arcsize="0.3" fillcolor="red" strokecolor="green" strokeweight="2px">
<v:fill type="gradient" />
</v:roundrect>

Fill Type
Gradient

<v:roundrect style="position:relative;left:150px;top:0px;width:100px;height:75px" arcsize="0.3" fillcolor="red" strokecolor="yellow" strokeweight="2px">
<v:fill type="gradient" color2="blue"/>
</v:roundrect> Gradient
color2

<v:roundrect style="position:relative;left:240px;top:0px;width:100px;height:75px" arcsize="0.3" fillcolor="red" strokecolor="red" strokeweight="2px">
<v:fill type="gradient" method="sigma" angle="-90"/> </v:roundrect>

method
angle

GradientRadial

<v:roundrect style="position:relative;left:150px;top:0px;width:150px;height:100px" arcsize="0.3" fillcolor="red" strokecolor="maroon" strokeweight="2px">
<v:fill type="gradientRadial" color2="green" method="linear" angle="-45" focus="50%" focusposition="0.25,0.25" focussize="0.5,0.5"/>
</v:roundrect> Focus Position
Focus Size

<v:oval style="position:relative;left:150px;top:0px;width:80px; height:80px" fillcolor = "red">
<v:fill type="gradientRadial" color2="white" method="sigma" focusposition="0.2,0.2" focussize="0.1,0.1"></v:fill>
</v:oval>

<v:oval style="position:absolute;left:250px;top:20px;width:160px; height:80px;z-index:2" fillcolor = "blue">
<v:fill type="gradientRadial" color2="blue" method="linear" angle="-45" focus="50%" focusposition="0.25,0.25" focussize="0.5,0.5" opacity="0.1"/>
</v:oval>

Hello World
The document background must have a color or an image, if the default colour of white is used this must still be stated, bgcolor="#FFFFFF"

Pattern

<v:roundrect style="position:relative;left:150px;top:0px;width:100px;height:75px" arcsize="0.3" fillcolor="red" strokecolor="green" strokeweight="2px">
<v:fill type="pattern" src="yourimage.jpg"/>
</v:roundrect> Fill Type
Pattern

<v:roundrect style="position:relative;left:150px;top:0px;width:100px;height:75px" arcsize="0.3" fillcolor="red" strokecolor="green" strokeweight="2px">
<v:fill type="pattern" color2="blue" src="yourimage.jpg"/>
</v:roundrect> color2

Tile

<v:roundrect style="position:relative;left:100px;top:0px;width:200px;height:150px" arcsize="0.3" fillcolor="red" strokecolor="green" strokeweight="2px">
<v:fill type="tile" src="yourimage.jpg"/>
</v:roundrect> Tile

Frame

<v:roundrect style="position:relative;left:100px;top:0px;width:200px;height:150px" arcsize="0.3" fillcolor="red" strokecolor="green" strokeweight="2px">
<v:fill type="frame" src="yourimage.jpg"/>
</v:roundrect> Frame

Here's a couple of examples using different shapes.

<v:oval style="position:relative;left:200px;top:0px;width:100px;height:75px" strokecolor="green" strokeweight="2px">
<v:fill type="frame" src="yourimage.jpg"/>
</v:oval>
Frame

<v:polyline points="200,100,400,150,200,200,200,100" strokecolor="red" strokeweight="2" fillcolor="#aaaaaa">
<v:fill type="frame" src="yourimage.jpg"/>
</v:polyline>

Frame




Note:
Some shapes are affected by the standard CSS attributes like width & height.
Positioning can be obtained by using the position attribute.

<v:oval style="position:relative;left:150px;top:0px;width: 350px; height: 300px" fillcolor = "#770000" strokecolor = "black" strokeweight="1">
<v:fill type = "gradientRadial" color2 = "#ffffdc" focus = "50%" focusposition = "0.057,0.066" focussize = "0.88,0.86" method="linear"></v:fill>
<v:textbox><br><center>Note:</center>
Some shapes are affected by the standard CSS attributes like <i>width</i> & <i>height</i>.<br>
Positioning can be obtained by using the position attribute.</font></v:textbox>
</v:oval>