Как сделать кросбраузерный linear-gradient без особых усилий

В CSS3 появилась замечательное свойство для background - это linear-gradient! Как только я о нём узнал, моему счастью не было предела! (честно! честно!)
Но моя радость была не долгой.
Затем в поисках истины, я узнал, что пока браузеры его поддерживают частично, то есть нужно для каждого браузера подписывать свою приставку типа: -moz-, -webkit- ...

Такое обстоятельство, лично меня уже, давно не радует (приходится сильно нагромождать css), а теперь представьте (хотя что-то мне подсказывает, что Вам не предаётся этого делать), в макете есть много различного градиента, закруглённые края у картинок и блоков, повёрнутый текст с тенью... вообщем нарисовано как надо, по последнему слову nano-развития. Получается, чтобы всё это описать да ещё кросбраузерно нужно не слабо под напрячься. Интересно что же будет дальше??? Надеюсь с развитием интернета и браузеров объёмы необходимого кода будут уменьшаться а не увеличиваться.

А теперь плавно переходим к теме....

Иииии собственно о счастье: кросбраузерный background: linear-gradient можно не писать в ручную!!! Переходим на Ultimate CSS Gradient Generator или CSS Gradient Background Maker, создаём нужный нам градиент и копируем всё, что он нам сгенерировал. Спасибо colorzilla.

Ну а если Ты любишь кряхтеть/сопеть и разбираться в тонкостях переходи сюда и читай! (что я кстати советую сделать хотя бы один раз).

 

* Кстати если Вы хоитие использовать обратную совместимость с IE6,7,8,9 без всяких хаков и вставок можно для них вставить не градиент а просто однотонный цвет с помощью CSS, пример:

div{
	background-color:red;
	background-image:-moz-linear-gradient(#FFF, #000);
}