Не получается сделать градиент с прозрачностью

Требуется создать заголовок, а от него сбоку две полоски, но эти полоски идут с прозрачностью
https://yadi.sk/i/tz2WuhJT3Znekt
Пишу код

<h2 class="title gradient-color">Категории товаров</h2>

.gradient-color{
background: linear-gradient(45deg, #fe5454 33%, #feac29);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.title{
/* Чтобы спрятать часть линий, которые
** будут вылазить за пределы блока */
overflow: hidden;
/* Выравнивание заголовка по центру,
** можно использовать left, right */
text-align: center;
}
.title:before, .title:after{
content: "";
display: inline-block;
vertical-align: middle;
width: 100%;
height: 2px;
position: relative;
}
.title:before{
margin-left: -100%;
left: -14px;
background-color: rgba(203, 111, 46, 0.8);
/* IE9, iOS 3.2+ */
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxMDAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjZmU1NDU0IiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZWFjMjkiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjYiLz48c3RvcCBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMSIvPjwvbGluZWFyR3JhZGllbnQ+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCN2c2dnKSIgLz48L3N2Zz4=);
background-image: -webkit-gradient(linear, 100% 0%, 0% 0%,color-stop(0, rgb(254, 84, 84)),color-stop(0.6, rgb(254, 172, 41)),color-stop(1, rgba(0, 0, 0, 0)));
/* Android 2.3 */
background-image: -webkit-repeating-linear-gradient(right,rgb(254, 84, 84) 0%,rgb(254, 172, 41) 60%,rgba(0, 0, 0, 0) 100%);
/* IE10+ */
background-image: repeating-linear-gradient(to left,rgb(254, 84, 84) 0%,rgb(254, 172, 41) 60%,rgba(0, 0, 0, 0) 100%);
background-image: -ms-repeating-linear-gradient(right,rgb(254, 84, 84) 0%,rgb(254, 172, 41) 60%,rgba(0, 0, 0, 0) 100%);
}
.title:after{
margin-right: -100%;
right: -14px;
background-color: rgba(203, 111, 46, 0.8);
/* IE9, iOS 3.2+ */
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjZmU1NDU0IiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZWFjMjkiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjYiLz48c3RvcCBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMSIvPjwvbGluZWFyR3JhZGllbnQ+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCN2c2dnKSIgLz48L3N2Zz4=);
background-image: -webkit-gradient(linear, 0% 0%, 100% 0%,color-stop(0, rgb(254, 84, 84)),color-stop(0.6, rgb(254, 172, 41)),color-stop(1, rgba(0, 0, 0, 0)));
/* Android 2.3 */
background-image: -webkit-repeating-linear-gradient(left,rgb(254, 84, 84) 0%,rgb(254, 172, 41) 60%,rgba(0, 0, 0, 0) 100%);
/* IE10+ */
background-image: repeating-linear-gradient(to right,rgb(254, 84, 84) 0%,rgb(254, 172, 41) 60%,rgba(0, 0, 0, 0) 100%);
background-image: -ms-repeating-linear-gradient(left,rgb(254, 84, 84) 0%,rgb(254, 172, 41) 60%,rgba(0, 0, 0, 0) 100%);
}

/* IE8- CSS hack */
@media \0screen\,screen\9 {
.title:before{filter: progidXImageTransform.Microsoft.gradient(startColorstr="#00000000",endColorstr="#fffe5454",GradientType=1);}
.title:after{filter: progidXImageTransform.Microsoft.gradient(startColorstr="#fffe5454",endColorstr="#00000000",GradientType=1);}
}

Никак прозрачность по концам полосок не получается. Что не так?