displaying a shadow on top of a pseudo-element

.box {
  background: #fff;
  width:600px;
  height:100px;
  position: relative;
  z-index: 999;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.75);
}

.box::after {
    background: linear-gradient(to right, 
      #00a1e4 25%, 
      #ff9a00 25%, 
      #ff9a00 50%, 
      #00a525 50%, 
      #00a525 75%, 
      #8c449d 75%);
    position: absolute;
    content: "";
    height: 10px;
    right: 0;
    left: 0;
    bottom: -10px;
    z-index: 1;
  box-shadow: inset 0 5px  4px -3px rgba(0, 0, 0, 0.75);
}

<div class="box">
  
</div>

.box {
  background: #fff;
  width:600px;
  height:100px;
  position: relative;
  z-index: 999;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.75);
}

.box::after {
    background: linear-gradient(to right, 
      #00a1e4 25%, 
      #ff9a00 25%, 
      #ff9a00 50%, 
      #00a525 50%, 
      #00a525 75%, 
      #8c449d 75%);
    position: absolute;
    content: "";
    height: 10px;
    right: 0;
    left: 0;
    bottom: -10px;
    z-index: 1;
 mix-blend-mode:multiply;
}

<div class="box">
  
</div>