Кроссбраузерный CSS3 градиент

Хотя Hypnot и был строгим учителем, своё дело он знал. Хуяря всех ковриком МКС он пробивал дорогу Рыбе сквозь толпу пассажиров. Рядом с Рыбой бежал LeXer. Он без всяких проблем покинул аэропорт и залез в TAXI. LeXer с Рыбой сели на заднее сиденье и начали долбить очередной косяк. Hypnot сел возле водителя.

- Нам в гостиницу кутрикеров! - приказал Hypnot отцовским голосом водиле.
- Ладно, - ответил тот и сменил руль на более спортивный. Потом легким нажатием разных кнопок преобразовал машину в реактивный самолет и со скоростью света полетел по улицам Сеула. В конце он достал мешочки для блевотни.
- Нахуй ты мне это тычешь? - отозвался Hypnot, - ты сука неплохо гоняешь, но всё равно до меня далеко. Я в NFS пять лет шпилю и на вонючих поворотах ебашил 400 км/ч на McLaren-е.

Потом они вышли и пошли в гостиницу кутрикеров. В лифте LeXer расстался с Рыбой, который жил в номере 413, и поехал в свой 606. Номер был не люкс, но вполне приличным. LeXer плюхнулся на кровать и захрапел. Завтра ведь шпилить…

Для FF используется -moz-linear-gradient, для Safari/Chrome — -webkit-gradient, для IE — DXImageTransform.Microsoft.gradient.

Вот только Opera 10 ещё не поддерживает CSS3 Gradient :( Что же делать?
Зато она поддерживает масштабирование background-image! Рисуем маленький (1x128) градиент в фотошопе, подключаем его через data:URI и масштабируем на размер блока!

background-size - для Opera, -o-background-size - для старой Opera, -webkit-background-size - для старого Safari, -khtml-background-size - для Konqueror.

К сожалению в FF3.5 не работает ни gradient ни background-size, но его доля всего 5% и она уменьшается вдвое каждый месяц (март 2010 / апрель 2010).
Для него можно повесить большую картинку:
@-moz-document url-prefix()
{
  div.lipsum {background: url("%some-big-gradient-image%"); background: -moz-linear-gradient(top,#ccc,#fff);}
}

Code:

div.lipsum {padding: 2em; border: 10px dashed #000;
 
  background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAACACAMAAAD9J/PGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUdQTFRF/Pz8zc3N2traz8/P0NDR0tLS0NDQ9fX1+Pj4//7/9PT04uLi6Ojo39/fzs3NzMzM/f7+3Nzc9fb26uvq6urp4ODh9/f44+Pj+vn519fX29zb19bX1tXV6Onp5OPk2dnY+/r79vX1+vv7+vr6+Pn4+fr6/////v7+0dHR09PT/fz80tPS0dHS/Pv78vPzzs7P/v39zs7O7/Dv/f393t7d8vLx3+Dg2drZ8PDw8fHw5+bn2dnZ7ezt7+/v5eXl5OTl+fn46+vr7u7u6urq1NTV1dXV4ODg2NnY7O3s19fY09TUz87P4eHh09PS9PP0zczM7u7t3Nzd8vLy29va8fHx5uXm5ubm7u7v5OTk1dXU19fW3Nvc5+fn+/v71tbV3d3dz87O7Ovs6Ofn3t7e9vf28/Pz4+Pi7Ozs8O/v9/f31NTT/P399vb3QCtbEwAAAKZJREFUeNokw9NSBQAUQNGV3c22bdu2bdf/P3em9potIWFf0p/8MKjfg20pIT2khg490kK3XZ22fLm0YlWNO1eqVdq0rt60ccnhWJVrhwrdG/EsL4xZU2pHTnhTrs6FeXNOnZly40luqFViWbFFj95tmHFgyblZH4ZMmHRi1JE+r/Zkh4zQqMiPF5/KZIYWCyq0atakwa1e/3X5NmxAQcjSHrf9CjAAht4XiD8Rf/EAAAAASUVORK5CYII=)
    no-repeat;
  -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; -khtml-background-size: 100% 100%; background-size: 100% 100%;
 
  background: -moz-linear-gradient(top,#ccc,#fff);
  background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff));
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#cccccc,endColorstr=#ffffff,GradientType=0); zoom: 1;
 
  background-clip: border-box; -moz-background-clip: border; -webkit-background-clip: border-box; -khtml-background-clip: border-box;
  background-origin: border-box; -moz-background-origin: border; -webkit-background-origin: border-box; -khtml-background-origin: border-box;
}

RTFM:

Все html/css примеры