CSS3 с линейным градиентом для двух направлений

Question

У меня есть заголовок на моем веб-сайте, который в настоящее время использует линейный градиент для перехода от одного цвета к другому. Это CSS:

#top-header { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    z-index: 99999; 
    /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, right top, color-stop(100%, #be2e26), color-stop(20%, #be2e26), color-stop(20%, rgba(22, 22, 22, 0)), color-stop(20%, rgba(22, 22, 22, 0))); 
    /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(left, #be2e26 100%, #be2e26 40%, rgba(22, 22, 22, 100) 100%, rgba(22, 22, 22, 100) 100%); 
    /* Chrome10+,Safari5.1+ */ 
    /* Opera 11.10+ */ 
    /* IE10+ */ 
    background: linear-gradient(to right, #be2e26 30%, #be2e26 20%, rgba(22, 22, 22, 0) 50%, rgba(22, 22, 22, 0) 100%); 
    /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#be2e26', endColorstr='#be2e26', GradientType=1); 
    /* IE6-9 */ 
    -webkit-transition: all 0.3s; 
    transition: all 0.3s; 
} 

Он начинается слева и слегка меняет цвет вправо. Я хочу делать то же самое с правой стороны в одно и то же время. Я попытался включить следующее, но он содержит только одну из двух строк:

background: linear-gradient(to right, #be2e26 30%, #be2e26 20%, rgba(22, 22, 22, 0) 50%, rgba(22, 22, 22, 0) 100%); 
background: linear-gradient(to left, #be2e26 30%, #be2e26 20%, rgba(22, 22, 22, 0) 50%, rgba(22, 22, 22, 0) 100%); 

Он хранит только вторую. Любая идея, как это исправить?

Answer 1

Вы можете добавить еще linear-gradient s, разделив их запятой ,.

background: <linear-gradient>, <linear-gradient>,... 

---

#top-header { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100px; 
 
    z-index: 99999; 
 
    background: -webkit-gradient(linear, left top, right top, color-stop(100%, #be2e26), color-stop(20%, #be2e26), color-stop(20%, rgba(22, 22, 22, 0)), color-stop(20%, rgba(22, 22, 22, 0))), -webkit-gradient(linear, right top, top top, color-stop(100%, #be2e26), color-stop(20%, #be2e26), color-stop(20%, rgba(22, 22, 22, 0)), color-stop(20%, rgba(22, 22, 22, 0))); 
 
    background: -webkit-linear-gradient(left, #be2e26 100%, #be2e26 40%, rgba(22, 22, 22, 100) 100%, rgba(22, 22, 22, 100) 100%), linear-gradient(to left, #be2e26 30%, #be2e26 20%, rgba(22, 22, 22, 0) 50%, rgba(22, 22, 22, 0) 100%); 
 
    background: linear-gradient(to right, #be2e26 30%, #be2e26 20%, rgba(22, 22, 22, 0) 50%, rgba(22, 22, 22, 0) 100%), linear-gradient(to left, #be2e26 30%, #be2e26 20%, rgba(22, 22, 22, 0) 50%, rgba(22, 22, 22, 0) 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#be2e26', endColorstr='#be2e26', GradientType=1); 
 
    -webkit-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
}

<header id="top-header"></header>