ざっと探した感じだとやり方まとめられてるサイトが見当たらなかったのでまとめてみます。
缶バッジ風というか、ほとんどリッチボタンと同じ感じですが。
同人系サイトだとわりと使いどころがありそうな気がします。

こんな感じとか、

こんな感じ。
HTML側で、img要素を囲むタグ（divとかfigureとか）に「badge」クラスを追加してます。
以下CSS。

.badge {
  position: relative;
  width: 320px;
  height: 0;
  padding-top: 320px;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 2px 5px 10px rgba(0,0,0,.4);
}

.badge:before,
.badge:after {
  position: absolute;
  display: block;
  content: "";
  border-radius: 50%;
  transform: rotate(-18deg);
  z-index: 2;
}

.badge:before {
  top: 4%;
  left: 7%;
  width: 60%;
  height: 40%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 100%);
}

.badge:after {
  top: 2%;
  left: 2%;
  width: 98%;
  height: 98%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .2) 100%);
}

.badge img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

サイズは320px×320pxで固定になっているので、適宜調整してください。
光と影、白と黒で作ったけど、青みつけたりしても面白いかも。