These are the 6 style classes required to make each wine glasses. One table for the <b>bowl, stem </b>and<b> foot</b> 1 class for each td cell in the table required to display the glass components.<p>
<b><u>* This version produces a more defined <i>'bowl width'</i> of 150 pixels of which only about 70% is visible when the page background<br>is the same color as first specified in the bowl.*</u></b><p> 

These are the style classes required to make one the vertical wine glasses<p>
&lt;style&gt;<br>

 .linear5{background:linear-gradient(45deg,black 0%, black 50%,purple 100%);width:75px; height:50px;}<br>
 .linear6{background:linear-gradient(-45deg,black 0%, black 50%,purple 100%);width:75px; height:50px;}<p>

.linear7{background:linear-gradient(90deg,black ,magenta);width:5px; height:25px;}<br>
.linear8{background:linear-gradient(-90deg,black,magenta);width:5px; height:25px;}<p>

.linear9{background: linear-gradient(-90deg, fuchsia, #000000); width:20px; height:3px;}<br>
.linear10{background: linear-gradient(90deg, fuchsia, #000000);width:20px; height:3px;}<br>
&lt;/style&gt;<p>
and this is the html code required<p>
<p>
&lt;div id="vast" align=center><br>
&lt;table cellpadding=0 cellspacing=0 border=0>&lt;tr>&lt;td class=linear5>&ampnbsp&lt;td>&lt;td class=linear6>&ampnbsp;&lt;/td>&lt;/tr>&lt;/table><br>

&lt;table cellpadding=0 cellspacing=0 border=0>&lt;tr>&lt;td class=linear7>&ampnbsp&lt;td>&lt;td class=linear8>&ampnbsp;&lt;/td>&lt;/tr>&lt;/table><br>

&lt;table cellpadding=0 cellspacing=0 border=0>&lt;tr>&lt;td class=linear9>&lt;td>&lt;td class=linear10>&lt;/td>&lt;/tr>&lt;/table><br>

&lt;/div>
<p>

These are the style classes required to make one the horizontal wine glasses<p>
&lt;style&gt;<br>

.rt1ab{ 

background: linear-gradient(35deg, #000000,  #104E8B);
     background-size: 100% 100%;
}
<br>
.rt1ba{ 
    background: linear-gradient(-35deg, #000000,  #104E8B);
     background-size: 100% 100%;
}
<p>
.rt2ab{ 
    background: linear-gradient(90deg, #000000, #306eff);
     background-size: 100% 100%;
}
<br>
.rt2ba{ 
    background: linear-gradient(-90deg, #000000, #306eff);
     background-size: 100% 100%;
}
<p>
.rt3ab{ 
    background: linear-gradient(90deg, #000000, #306eff);
     background-size: 100% 100%;
}
<br>
.rt3ba{ 
    background: linear-gradient(-90deg, #000000, #306eff);
     background-size: 100% 100%;
}


<br>&lt;/style>
<p>
and this is the html code required.<p> <u><b>*notice that the dimensions <i>MUST</i> be specified in the table code for this version as they not specified in the style tag*</b><u><p>



&lt;div id="vast" align=center><br>
&lt;table cellpadding=0 cellspacing=0 border=0>&lt;tr>&lt;td width=25 height=50 class=rt1ab>&ampnbsp&lt;td>&lt;td width=25 height=50 class=rt1ba>&ampnbsp;&lt;/td>&lt;/tr>&lt;/table><br>



&lt;table cellpadding=0 cellspacing=0 border=0>&lt;tr>&lt;td width=5 height=25 class=rt2ab>&ampnbsp&lt;td>&lt;td width=5 height=25 class=rt2ba>&ampnbsp;&lt;/td>&lt;/tr>&lt;/table><br>



&lt;table cellpadding=0 cellspacing=0 border=0>&lt;tr>&lt;td width=20 height=3 class=rt3ab>&lt;td>&lt;td width=20 height=3 class=rt3ba>&lt;/td>&lt;/tr>&lt;/table><br>



&lt;/div>