コピペで使える box-shadowの使用例9パターン
シャドウ(box-shadow)の使用例を紹介します。コピペして使用できます。

目次
- はじめに
- 右下に影をつける
- ボックスの外側全体に影をつける
- 左上の内側に影をつける
- 右下の内側に影をつける
- ボックスの内側全体に影をつける
- 左下が浮いている風の影をつける
- 右下が浮いている風の影をつける
- 両端が浮いた風の影をつける
- 右下にハッキリした影をつける
- まとめ
はじめに
使用例としてbox-shadowを使って、ボックスに影をつけてみました。コピペでも使えますので、参考にしてみてください♪
共通のCSSはこちら(白い四角の部分)
div{ position: relative; width: 200px; height: 100px; background-color: #fff; }
サンプル
右下に影をつける
<div class="sample01"></div>
.sample01{ box-shadow: 5px 5px 5px rgba(0,0,0,.2); }
ボックスの外側全体に影をつける
<div class="sample02"></div>
.sample02{ box-shadow: 0 0 10px rgba(0,0,0,.3); }
左上の内側に影をつける
<div class="sample03"></div>
.sample03{ box-shadow: 5px 5px 5px rgba(0,0,0,.2) inset; }
右下の内側に影をつける
<div class="sample04"></div>
.sample04{ box-shadow: -5px -5px 5px rgba(0,0,0,.2) inset; }
ボックスの内側全体に影をつける
<div class="sample05"></div>
.sample05{ box-shadow: 0 0 5px 5px rgba(0,0,0,.2) inset; }
左下が浮いている風の影をつける
<div class="sample06"></div>
.sample06{ position: relative; width: 200px; height: 100px; background-color: #fff; } .sample06::before{ content:""; position: absolute; z-index: -1; bottom: 10px; display: block; width: 50%; height: 50%; box-shadow: 0 10px 5px rgba(0,0,0,.3); } .sample06::before{ left: 5px; transform:rotate(-3deg); }
右下が浮いている風の影をつける
<div class="sample07"></div>
.sample07{ position: relative; width: 200px; height: 100px; background-color: #fff; } .sample07::after{ content:""; position: absolute; z-index: -1; bottom: 10px; display: block; width: 50%; height: 50%; box-shadow: 0 10px 5px rgba(0,0,0,.3); } .sample07::after{ right: 5px; transform:rotate(3deg); }
両端が浮いた風の影をつける
<div class="sample08"></div>
.sample08{ position: relative; width: 200px; height: 100px; background-color: #fff; } .sample08::before, .sample08::after{ content:""; position: absolute; z-index: -1; bottom: 10px; display: block; width: 50%; height: 50%; box-shadow: 0 10px 5px rgba(0,0,0,.3); } .sample08::before{ left: 5px; transform:rotate(-3deg); } .sample08::after{ right: 5px; transform:rotate(3deg); }
右下にハッキリした影をつける
<div class="sample09"></div>
.sample09{ box-shadow: 0 0 5px 5px rgba(0,0,0,.2) inset; }
まとめ
いかがでしたか?
色々なニュアンスを表現できますので、ぜひ使ってみてくださいね。また、ジェネレーター(サイトはこちら)などを使ってみるのもオススメです。