backdrop-filter vs box-shadow

by kmouse

HTML

<div class="box boxshadow filter backdrop"></div>
<div class="box boxshadow filter"></div>

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

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

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

CSS

body {
		  width: 900px;
			background-color: #ddd;
		}

		.box {
		  width: 200px;
		  height: 70px;
		  border: 2px solid #777;
		  margin: 120px auto;
		  padding: 15px;
		  border-radius: 30px 8px;
		  box-sizing: border-box;
		}

		.filter {
		  filter: drop-shadow(#fe3f 250px 50px 0px);
		}

		.backdrop {
		  backdrop-filter: invert(100%);
		}

		.boxshadow {
		  box-shadow: #f008 40px 30px 0px 0px, #00f8 -40px -30px 0px 0px;
		}