.text_display { font-size: 12px; font-weight: bold; font-family: Georgia, Times New Roman, serif; color: #3d85c6; display:list-item; float:left; margin:10px; width:100%; line-height: 15px; } .radial_grad { width: 300px; height: 120px; /* radial gradient example with various browser support */ background: radial-gradient(circle farthest-side at 50px 50px, red, green, blue); background: -webkit-radial-gradient(circle farthest-side at 50px 50px, red, green, blue); background: -webkit-gradient(radial, 50px 50px, circle farthest-side, color-stop(0% red), color-stop(0% green), color-stop(0% blue)); background: -o-radial-gradient(circle farthest-side at 50px 50px, red, green, blue); background: -ms-radial-gradient(circle farthest-side at 50px 50px, red, green, blue); margin:10px; display:list-item; float:left; }
<div class="text_display">Radial Gradient: Circle farthest-side <br /> <code> background: radial-gradient(circle farthest-side at 50px 50px ,red,green,blue);<br /> background: -webkit-radial-gradient(circle farthest-side at 50px 50px ,red,green,blue);<br /> background: -webkit-gradient(radial,50px 50px,circle farthest-side,color-stop(0% red),color-stop(0% green),color-stop(0% blue));<br /> background: -o-radial-gradient(circle farthest-side at 50px 50px ,red,green,blue);<br /> background: -ms-radial-gradient(circle farthest-side at 50px 50px ,red,green,blue);<br /> </code> </div> <br /> <div class="radial_grad"></div>