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

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

На современных сайтах в качестве фоновых изображений часто используется линейный градиент - плавный переход из одного цвета в другой. Чтобы реализовать линейный градиент при верстке сайта можно использовать PNG картинку, но это не самый лучший способ.

Если вам необходимо реализовать кроссбраузерный линейный градиент на CSS3, то мы предлагаем следующий простой код:

background: #46afdf;
     background: -ms-linear-gradient(top, #47b0e0 0%,#198ec3 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#47b0e0', endColorstr='#198ec3');
     background: -webkit-gradient(linear, left top, left bottom, from(#47b0e0), to(#198ec3));
     background: -moz-linear-gradient(top,  #47b0e0,  #198ec3);
     background: gradient(linear, top,  #47b0e0,  #198ec3);
     background: -o-linear-gradient(top,  #47b0e0,  #198ec3);

Таким образом вы сможете создать линейный градиент, который будет отображаться во всех современных браузерах и при любых условиях, если включено отображение CSS стилей. Просто скопируйте код, вставьте в ваш файл стилей style.css и замените коды цветов на те, которые необходимы.