.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; } .linear_grad { width: 120px; height: 120px; /* Linear gradient example with various browser support */ background: linear-gradient(to top,red,green,blue); background: -webkit-linear-gradient(to top,red,green,blue); background: -moz-linear-gradient(to top,red,green,blue); background: -o-linear-gradient(to top,red,green,blue); background: -ms-linear-gradient(to top,red,green,blue); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#FF0000, endColorstr=#00FF00); margin:10px; display:list-item; float:left; }
<div class="text_display"> Linear Gradient <br /> <code> background: linear-gradient(to top,red,green,blue);<br /> background: -webkit-linear-gradient(to top,red,green,blue);<br /> background: -moz-linear-gradient(to top,red,green,blue);<br /> background: -o-linear-gradient(to top,red,green,blue);<br /> background: -ms-linear-gradient(to top,red,green,blue);<br /> filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#FF0000, endColorstr=#00FF00);</code> </div> <br /> <div class="linear_grad"> </div>