CSS rotation and box-shadow

How can the shadow direction be kept?

HTML

<div class="box1 shadow"></div><div class="box1"></div>
<div class="box2 shadow"></div><div class="box2"></div>
<div class="box3 shadow"></div><div class="box3"></div>
<div class="box4 shadow"></div><div class="box4"></div>
<div class="box5 shadow"></div><div class="box5"></div>

CSS

div {
  width: 50px;
  height: 50px;
  margin: 20px;
  display: inline-block;
}

.shadow {
  background-color: black !important;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  margin-top: 30px;
  margin-left: 30px;
  position: absolute;
  z-index: -1;
}

.box1 {
  background-color: #b00;
}

.box2 {
  background-color: #0b0;
  transform: rotate(30deg);
}

.box3 {
  background-color: #00b;
  transform: rotate(60deg);
}

.box4 {
  background-color: #b0b;
  transform: rotate(90deg);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.box5 {
  background-color: #0bb;
  animation-name: spin;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}