NEWS

HOME > CSSのみで画像を丸く切り抜き、境界線をぼかす方法

CSSで画像を円形にくり抜き境界線をボカす方法です。

Photoshopなどで画像を円形にくり抜き境界線をぼかしpngなどで背景を透過して使用すると
画像の入れ替えの度に画像を作成し直す必要がある為、CSSで作成してみます。

CSSコードを作成。
mask-imageを使いradial-gradientで外側を透過させます。
色は何色でも大丈夫です。※Photoshopのクリッピングマスクと同じイメージ。

.circle-box {
    position: relative;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    -webkit-mask-image: radial-gradient(rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 70%);
    mask-image: radial-gradient(rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 70%);
}
.circle-box img{
    object-fit: cover;
    position: absolute;
    width: 100%;
    height: 100%;
}

object-fit: coverとposition: absoluteを使い円形内に収まる様に設定。
正方形の画像を用意した場合はwidth: 100%のみでOK。

続いてhtmlコード。
img要素を囲むだけ。

<div class="circle-box">
    <img src="img/circle-sample.jpg" alt="サンプル">
  </div>

完成です。

デモページはコチラ