Box-shadow vs. filter:drop-shadow()

by Mike Jacobson

HTML

<div class="box-shadow">box-shadow: 10px 5px 5px red</div>
<div class="drop-shadow">Filter</div>
<img src="https://placekitten.com/100/100" class="drop-shadow">

CSS

div {
  border: 1px solid #bbb;
  font-size: .8em;
  margin-bottom: 20px;
  padding: 5px;
  width: max-content;
}
div::before {
  content: 'before';
  border: 1px solid blue;
  display: block;
}
div::after {
  content: 'after';
  border: 1px solid green;
  display: block;
}

.box-shadow {
  box-shadow: 10px 5px 5px red;
}

.drop-shadow {
  filter: drop-shadow(10px 5px 5px red);
}