Невозможного нет.
Создаете блок div высотой в 1px и нужной шириной. Переходите на сайт https://www.colorzilla.com/gradient-editor/ и создаешь нужный горизонтальный градиент. Все!
html ->

css->

.boder {
width: $width;
height: $height;
/*
* ДАЛЬШЕ КОД ИЗ ГЕНЕРАТОРА
*/
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#1e5799′, endColorstr=’#7db9e8′,GradientType=0 ); /* IE6-9 */
}

Если Вы из тех кто не использует css3 — ставьте изображение…

Спасибо большое!

Спасибо за полезную статью! Делал плавающее меню на сайте. Правда, JS можно немного сократить, потому что если в меню будет состоять больше чем с 3-х пунктов, код не очень красиво будет выглядеть со всеми этими операторами сравнения;)

Можно написать что-то типо этого:

function scroll_active() {

		$('[data-container=page]').each(function(){
			var window_top = $(window).scrollTop();
			var position = $(this).offset().top;

			if (window_top > position) {
				$("#floating_menu .container ul li").removeClass("active");
				$('a[href="#'+ $(this).find('.categores-cover').attr('id') +'"]').parents('li').addClass("active");
			}
		});
	}

	jQuery(function() {
		jQuery(window).scroll(scroll_active);
	});

Преимущества:
— Мы не привязываемся к классам и айдинкам;
— Дав дата атрибут нужным ссылкам меню мы избавляемся от огромной структуры операторов if-else;
— Универсальный и минималистический код.

P.S В любом случае, спасибо Ольга за статью!

хм… умно! Спасибо большое, Дмитрий!

Спасибо, ребята… Все получилось…

Согласен с тем что написано выше. От себя скажу, что нужно аккуратнее вырезать изображения, если ты их используешь на сайте. У меня есть предположение, что вырезаны они были в фотошоте с помощью волшебной полочки. В браузере видны зубцы снизу на кнопке и на логотипе. Это выглядит не очень)
Да и по поводу ссылок на горизонтальном меню… их нет, а стили заданы на тег

Придумал!…

Лично я не вижу здесь ничего сложного. Используйте CSS3 + префиксы браузеров з движками -o, -moz, -webkit для корректного отображения во всех «нормальных» браузерах. ІЕ 9 beta + тоже работает с градиентом. Буквально несколько строк CSS кода и градиент готов. Пример:

div#example {
background: -moz-linear-gradient(top,#EEEEF0,#D2CFD4);
background: -webkit-linear-gradient(top, #EEEEF0, #D2CFD4);
background: -o-linear-gradient(top, #EEEEF0, #D2CFD4);
background: -ms-linear-gradient(top, #EEEEF0, #D2CFD4);
background: linear-gradient(top, #EEEEF0, #D2CFD4);
}
Остается копи/пастить и поменять цвета на свои