Сделать общую тень у совмещенных блоков

.green{ 
  width:100px; 
  height:100px; 
  background-color:green; 
} 
.red{ 
  width:150px; 
  height:150px; 
  background-color:red; 
} 
.block{ 
  filter:drop-shadow(0 0 7px #000); 
}

<div class="block"> 
  <div class="green"></div> 
  <div class="red"></div> 
</div>

* { 
  margin: 0; 
  padding: 0; 
} 
 
html, body { 
  height: 100%; 
} 
 
body { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: center; 
  -ms-flex-pack: center; 
  justify-content: center; 
  -webkit-box-align: center; 
  -ms-flex-align: center; 
  align-items: center; 
} 
 
.a { 
  position: relative; 
  background: green; 
  width: 100px; 
  height: 100px; 
} 
 
.b { 
  background: red; 
  width: 200px; 
  height: 100px; 
} 
 
.a::after { 
  content: ''; 
  width: 100px; 
  height: 100px; 
  z-index: -1; 
  position: absolute; 
  box-shadow: 0px 0px 16px black; 
} 
 
.b::after { 
  content: ''; 
  width: 200px; 
  height: 100px; 
  z-index: -1; 
  position: absolute; 
  box-shadow: 0px 0px 16px black; 
}

<div class="con"> 
  <div class="a"></div> 
  <div class="b"></div> 
</div>