Как заставить тень коробки работать со всех сторон коробки

Question

Я использую тень для создания вертикальной светящейся линии в программном интерфейсе, который я пишу электроном. Линия появляется между двумя большими фонами и служит разделителем. В настоящее время тень появляется только на левой стороне. Что я делаю не так и как я могу заставить его существовать с обеих сторон? В настоящее время это выглядит как this.

Вот код стиля для раздела слева и справа, а также разделитель.

        .left {
          background-color: #00000d;
          width: 150px; 
          height: 500px; 
          float: left; 
          text-align: center;
          border-top-left-radius: 20px;
          border-bottom-left-radius: 20px;
        }
        .divider {
          background-color:yellow; 
          width: 5px; 
          height: 500px;
          float: left;
          box-shadow: 0 0 10px gold
        }
        .right {
          background-color: #00000d;
          width: 850px;
          height: 500px;
          float: left;
          border-top-right-radius: 20px;
          border-bottom-right-radius: 20px;
        }

Спасибо за любую помощь что любой может предоставить!

Answer 1

Это потому, что ваш элемент с .right перекрывает тень поля с правой стороны. Попробуйте добавить это к .divider в качестве обходного пути:

position: relative;
z-index: 1;