Вертикальный линейный градиент

Question

Я пытаюсь получить вертикальный эффект для боковой панели на странице.Я пробовал опцию deg, но она по-прежнему показывает горизонтальную линию

.sidebar {
  position: relative;
  display: inline-block;
  padding: 15px 25px;
  background-image: linear-gradient(90deg, #1559EC, #1559EC);
  color: #fff;
  font-size: 36px;
  font-family: Arial;
  border-radius: 3px;
  box-shadow: 0px 1px 4px -2px #333;
  text-shadow: 0px -1px #333;
}

.sidebar:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: 50%;
  background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
}

<div class="sidebar">
  The quick brown fox
</div>

Answer 1

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

Самое простое решение для ключевого слова - использовать «направление» вместо градуса.Увидеть ниже.Первое поле сверху вниз, а второе слева направо.

В вашем примере есть псевдокласс (: after), добавляющий второй градиент для создания жесткой линии.Вы можете добиться аналогичного эффекта, добавив больше градиентов к градиенту.

.box{
        width: 100px;
        height: 100px;
        margin-bottom: 20px
    }
.gradient1 {
    background: linear-gradient(to bottom, #8fc400, #29b8e5);
}
.gradient2 {
    background: linear-gradient(to right, #8fc400, #29b8e5);
}
.gradient3 {
    background: linear-gradient(to bottom, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%);
} 

        <div class="box gradient1">
            
        </div>
        <div class="box gradient2">
            
        </div>
        <div class="box gradient3">
            
        </div>

Answer 2

Проблема не в градиенте, а в псевдоэлементе.Градиент использует тот же цвет, поэтому угол бесполезен.Вам нужно инвертировать значения высоты / ширины псевдоэлемента и отрегулировать направление его градиента.Вы также можете заменить градиент основного элемента простым цветом:

.sidebar {
  position: relative;
  display: inline-block;
  padding: 15px 25px;
  background:#1559EC;
  color: #fff;
  font-size: 36px;
  font-family: Arial;
  border-radius: 3px;
  box-shadow: 0px 1px 4px -2px #333;
  text-shadow: 0px -1px #333;
}

.sidebar:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 50%;
  height: calc(100% - 4px);
  background: linear-gradient(to right,rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
}

<div class="sidebar">
  The quick brown fox
</div>

И вы можете упростить это, как показано ниже, используя несколько фонов для основного элемента:

.sidebar {
  position: relative;
  display: inline-block;
  padding: 15px 25px;
  background:
   linear-gradient(to right,rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2)) 2px 2px/50% calc(100% - 4px)no-repeat,
   #1559EC;
  color: #fff;
  font-size: 36px;
  font-family: Arial;
  border-radius: 3px;
  box-shadow: 0px 1px 4px -2px #333;
  text-shadow: 0px -1px #333;
}

<div class="sidebar">
  The quick brown fox
</div>