Возможно ли сделать бесконечный box-shadow?

Этого эффекта можно добиться при помощи псевдоэлементов. В примере используется ::after, ему достаточно задать height: 99999px и добавить обертке (в данном случае body) overflow: hidden.

*, *:after { 
  box-sizing: border-box; 
} 
 
body { 
  overflow: hidden; 
} 
 
div { 
  width: 100px; 
  padding: 10px; 
  background: #ccc; 
  position: relative; 
  border: 1px solid; 
} 
 
div:after { 
  position: absolute; 
  left:0; 
  top: calc(100% + 1px); 
  content: ''; 
  background: #ccc; 
  width: 100%; 
  height: 99999px; 
}

<div>text</div>

Задавайте тень в единицах зависящих от высоты экрана — vh. У тени есть несколько параметров вам надо задавать вертикальное расположение и распространение. Чтобы тень занимала весь низ и по в экран нужно задать тень так: box-shadow: 0 50vh 0 50vh red;, где вместо red указывайте нyжный цвет. Небесполезно будет также для body или нужного контейнера задать overflow: hidden;.

body { 
  overflow: hidden; 
} 
 
.wrapper { 
  height: 300px; 
  width: 300px; 
} 
.inner { 
  padding: 8px 10px 3px 35px; 
  margin: 0 auto; 
  width: 100px; 
  background-color: #6288cf; 
  box-shadow: 0 50vh 0 50vh red; 
}

<div class="wrapper"> 
  <div class="inner">...</div> 
</div>

Также можете вместо 50vh использовать calc(50vh - 10px), где вместо 10px можете использовать нужное количество пикселей.