cman.jp > パーツ作成メニュー > 画像のデザイン > 画像に影を付ける

画像に影を付けるCSSの生成

htmlで画像に影を付けるにはCSSの「box-shadow」を使用します。
当ページでは画像に影を付けるCSSを簡単操作で作成することが出来ます。

生成された「html」「css」などのソースコードは、そのままコピー＆ペーストで利用することが出来ます。

画像に影を付けてみよう

影は上下左右の方向に指定することが出来ます。影のぼかしや色などや、影を内側にも指定できますので是非お試しください。

影の長さ

横方向
縦方向

影のぼかし

影の色

他▶

透明度

影の広がり

使用したhtml

<img class="shadow" src="img_sample.png" alt="サンプル画像">

生成したCSS

<style type="text/css">
.shadow {
  box-shadow: 15px 15px 20px #66ff66;
}
</style>

「box-shadow」の使い方は以下を参照ください。
box-shadow 「要素に影を付ける」の構文

特になし。