画像の周囲をグラデーションでぼかしながら丸くくり抜くCSS

四角い画像をウェブ上で丸く表示したいとき、画像を切り抜く境界部分をグラデーションでぼかして表示させたいこともあるでしょう。
画像を丸く切り抜いた上で、グラデーションを使って少しずつ透明(または白色)にしていくような描画も、わざわざ画像を加工しなくてもHTMLとスタイルシートで実現できます。

CSS3には円形グラデーションを指定する「radial-gradient」という書き方があるので、これを使います。「radial-gradient」は、IEではIE10以降でサポートされました。それ以外の代表的なブラウザではそこそこ昔から対応しています。(Firefox16、Chrome26、Safari6.1、Opera12.1以降でベンダープレフィックスなしで使えます。)

画像の周囲をグラデーションでぼかしながら丸くくり抜く表示例

下記は、元の画像と、画像の周囲をグラデーションでぼかしつつ丸く表示させた例です。

どの位置からどの位置までをグラデーションにするかは、CSSで自由に設定できます。
上記のように表示するHTML＋CSSの記述方法を下記に紹介します。

画像の周囲をグラデーションでぼかしながら丸くくり抜く記述方法

まず、HTMLソースは以下のように記述しておきます。
div要素を二重に重ねています。

<div class="sample gradate-image-round">
	<div class="mask">画像の周囲をぼかしながら丸くくり抜く</div>
</div>

上記のHTMLに対して、以下のCSSを適用します。

.gradate-image-round {
	background-image: url("summerriver.jpg");
	width: 250px;
	height: 113px;
	background-size: cover;
	background-repeat: no-repeat;
}
.gradate-image-round .mask {
	background-image: radial-gradient(ellipse , transparent 60%, white 72% );
	width: 250px;
	height: 113px;
}

まず、外側のdiv要素に対しては以下の5つのプロパティを使って、対象の画像を「背景画像」として表示しています。

• background-imageプロパティを使って、背景画像の形で目的の写真「summerriver.jpg」を表示。
• 画像サイズとボックスのサイズを一致させるために、width・heightプロパティに画像と同じサイズを指定。background-repeatプロパティに値「cover」を指定して、指定領域内に画像の表示サイズがぴったり合うようにしています。
• background-repeatプロパティに値「no-repeat」を指定することで、背景画像が繰り返し表示されることを避けています。これは(width・heightプロパティの設定が正しければ)省略しても問題ありません。ここでは、古いブラウザでおかしく表示される可能性を下げるために念のために書いておきました。

次に、内側のdiv要素に対しては、円形グラデーションを使って「ボックスの背景色」を透明色から白色へと変化するよう記述しています。

• background-imageプロパティの値に「radial-gradient(……);」を指定することで、円形グラデーションが描かれます。ここでの記述内容は以下の通りです。
  • 「ellipse」は、楕円形に表示する指定です。
  • 「transparent 60%, white 72%」は、60%の位置までは透明(transparent)で、そこからグラデーションを開始して、72%の位置で白色(white)にする、という指定です。(つまり、グラデーションを使ってぼかす範囲は12％)
• widthプロパティとheightプロパティには、先程記述した親ボックスと同じサイズを指定しておきます。

上記のようにすることで、対象画像の中心から外側へ楕円形に向かっていく過程で、55%の位置から72%の位置までの領域で、透明色から白色へとグラデーションで表示されるようになります。

円形グラデーションの位置を様々にずらしてみた表示例

先の例では、「完全な透明色」から「不透明な白色」へのグラデーション位置として、中心から外側へ向かって60％の位置からグラデーションを開始し、72％の位置でグラデーションを終えるように記述しました。
この数値(パーセント)を様々に変化させることで、画像を丸くくり抜く分量と、少しずつ薄くしていく効果の分量を調整できます。

例えば以下のA～Cように。

Aは、冒頭で紹介した例です。グラデーションの指定部分を再掲すると、以下の通りです。

	background-image: radial-gradient(ellipse , transparent 60%, white 72% );

Bは、グラデーションの開始位置を少し早めて55%にした例です。

	background-image: radial-gradient(ellipse , transparent 55%, white 72% );

Cは、グラデーションの開始位置を少し早めて45%にした例です。

	background-image: radial-gradient(ellipse , transparent 45%, white 72% );

このように、自由にぼかす範囲を指定して画像を切り抜くことができます。
というわけで、画像の周囲をグラデーションでぼかしながら丸くくり抜く方法でした。

■関連記事：

• 画像を丸く円形にくり抜いて表示するCSS
• 画像の四隅(角)を丸くするCSS
• テキストの背景色を半透明にしつつ、文字色は不透明にするCSS

(更新日：2016年04月07日)