<div id="complete_example"></div>

<div id="e_example">
	<div class="palm-text-wrapper">
		<div class="palm-body-text" x-mojo-loc=''>
			Using the CSS to fill an element with gradient colors.
		</div>
		
		<div class="palm-body-title" x-mojo-loc=''>
			Example
		</div>
		<div class="palm-body-text" x-mojo-loc=''>
			Examples of using <em>-webkit-gradient</em> property, to fill linear and radial gradients.
		</div>
		
		<div style="float:left;width:130px;height:130px;background-image:-webkit-gradient(linear, left top, left bottom,
		 	color-stop(0, red),
			color-stop(20%, orange),
		  	color-stop(40%, yellow),
		  	color-stop(60%, green),
		  	color-stop(80%, blue),
		  	color-stop(100%, violet));
		"></div>
			
		<div style="margin-left:15px;float:left;width:130px;height:130px;background-image:-webkit-gradient(radial,35% 35%,5,center center,65,from(#fcae18),color-stop(80%, #f16122),to(rgba(255,255,255,0)));">
		</div>
			
		<div style="clear:both"></div>
		
	</div>
</div>

<div id="e_about">
</div>

<div id="e_html">
<div class="rainbow" style="width:130px;height:130px;"></div>
<div class="ball" style="width:130px;height:130px;"></div>
</div>

<div id="e_css">
.rainbow {
	background-image: -webkit-gradient(linear, left top, left bottom,
	 	color-stop(0, red),
		color-stop(20%, orange),
	  	color-stop(40%, yellow),
	  	color-stop(60%, green),
	  	color-stop(80%, blue),
	  	color-stop(100%, violet));
}

.ball {
	background-image: -webkit-gradient(radial, 35% 35%, 5, center center, 65, 
		from(#fcae18), 
		color-stop(80%, #f16122),
		to(rgba(255,255,255,0)));
}
</div>