CSSでプロフィール画像設定のような円系に切り取るUIを作る

よくある画像をアイコンのように丸くトリミングするUIを作る際、画像のトリミング自体はその辺のJSライブラリを利用して容易に実現できます。
しかし、その多くが四角くトリミングするもののため、実際に丸く表示されている範囲はわかりません。
それを解決するためにCSSで丸く表示される範囲を明るく表示してそれ以外をグレーアウトさせるコードを以下にメモします。
↓こんな感じのやつ

triming.scss

.triming:after {
    position: absolute;
    top: 4px;
    bottom: 0;
    left: calc((100% - 280px)/2 + 4px);
    width: 272px;
    height: 272px;
    pointer-events: none;
    content: "";
    // 背景を透明にする（円形で画像が見える部分）
    background: transparent;
    border: 2px solid #fff;
    border-radius: 140px;
    // 円以外の部分を影で埋める
    box-shadow: 0 0 1000px 1000px rgba(0,0,0,.5);
}

解説

軽く解説をすると、切り取るライブラリ（大体Canvas)の要素にafter要素を与え、そこで円を描画しています。
CSSにおけるbox-shadowは要素が透明の場合要素にかぶっているところは描画されないことから、影でグレーの部分を表現します。(上位でoverflow: hidden;していればいい感じに収まります)