Бывали времена, когда мы городили графику для отображения градиентов на страницах сайтов. XXI век потихоньку наступает.
Итак — градиент на CSS:
background-image: linear-gradient(bottom, rgb(152,104,116) 6%, rgb(183,136,151) 53%);
background-image: -o-linear-gradient(bottom, rgb(152,104,116) 6%, rgb(183,136,151) 53%);
background-image: -moz-linear-gradient(bottom, rgb(152,104,116) 6%, rgb(183,136,151) 53%);
background-image: -webkit-linear-gradient(bottom, rgb(152,104,116) 6%, rgb(183,136,151) 53%);
background-image: -ms-linear-gradient(bottom, rgb(152,104,116) 6%, rgb(183,136,151) 53%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.06, rgb(152,104,116)),color-stop(0.53, rgb(183,136,151)));
И плюсом лечилка для остального
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#ffffff);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#ffffff)"; background-color: #CCC;
И для того, чтобы не поломать красоту —
no-repiat
P.S. Очень хорошая статья про создание градиентов. В ней подробно описаны все принципы.
