Создание градиента с помощью CSS

Создание градиента с помощью CSSВозможность создания такого градиента с помощью CSS, была вынесена на рассмотрение Webkit около двух лет назад, но редко использовалась из-за несовместимости с остальными браузерами (напомню, этот движок используют только сафари и хром).
С одним из последних обновлений FireFox (версия 3.6) появилась возможность совершенно корректно использовать данную опцию. Теперь градиент без фонового изображения можно сделать для IE, Firefox 3.6+, Safari и Chrome.

Для Webkit браузеров (Safari и Chrome)

Добавление следующей строчки кода, позволит задать линейный градиент в палитре от (#ccc) до (#000)

background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));

градиент для webkit

Для Firefox 3.6+

background: -moz-linear-gradient(top,  #ccc,  #000);

градиент для Firefox

Для Internet Explorer

Следующий фильтр работает только для IE, поэтому и код будет виден только IE.

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

градиент для IE

Кросс браузерный градиент с помощью CSS.

Первой строчкой задаётся свойство для браузеров, которые не поддерживают данное свойство

background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */

Важное замечание:
1. IE поддерживает только линейные (вертикальные или горизонтальные) градиенты в двухцветной палитре.
2. Не все браузеры поддерживают CSS градиенты, поэтому как ключевой элемент дизайна лучше его не использовать.