html - カスタム シェイプの周囲に影を表示するためのドロップ シャドウ フィルタの代替

Question

カスタム シェイプの周りに影を作成しようとして、ドロップ シャドウ フィルターの CSS プロパティを発見しました。しかし、それを実装した後、ウェブサイトの速度が大幅に低下することに気付きました.

したがって、ページの読み込み速度を犠牲にすることなく同じ効果を得るための代替手段を探しています.

サイトのメイン コンテンツは、ボックス シャドウを使用したシャドウ ボックス ラッパーで囲まれていますが、これは背景の透過部分のため、エンド セクションには使用できませんでした。

シャドーボックスの影に似た影を作ろうとしています。

現在の様子を示すjsFiddle を次に示します。

実際のサイトで見ることができます

HTML

<div class="container shadow-box no-padding"></div>
  <div class="container justify-content-center">
  <section class="light-bg end-section" id="portfolio"></section>
</div>

CSS

.container{
  width:70%;
  margin:auto;
}    
.shadow-box{
  background:green;
  height:200px;
  -webkit-box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
  -moz-box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
  -ms-box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
  -o-box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
  box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
}    
.end-section {
  background: radial-gradient(circle at 50% 100%, transparent 50px, #c1c1c1 50px);
  z-index: 5;
  height:200px;
  filter: drop-shadow(0 30px 15px rgba(0, 0, 0, 0.6))
  drop-shadow(0 10px 5px rgba(0, 0, 0, 0.6));
}    
.light-bg:before {
  content: '';
  position: absolute;
  z-index: 3;
  top: -50px;
  left: 50%;
  margin-left: -50px;
  height: 50px;
  width: 100px;    
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  background: #c1c1c1;
}