はじめに
Webデザインで「立体感」や「奥行き」を簡単に表現できるbox-shadowプロパティ。
「なんとなく使っているけど、細かい指定方法や活用例が分からない」という方も多いのではないでしょうか？
この記事では、box-shadowの基本から応用、よくあるTipsまで幅広く解説します。
box-shadowでデザインの幅が広がる
box-shadowは単なる影を付けるだけでなく、ボタンやカードのアクセント、立体的な表現、ホバーアニメーションなど、様々な場面で活用できます。
- 立体感や浮き上がる効果を出せる
- 複数の影を重ねて表現力アップ
- ホバーやアクティブ時のアニメーションに最適
index.html
<div class="box">Box Shadowのサンプル</div>
style.css
.box {
width: 200px;
height: 100px;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
margin: 32px;
display: flex;
align-items: center;
justify-content: center;
}
普通にボックスを作るより、影があるだけでオシャレですよね！
具体的な使い方
基本構文
box-shadow: [水平位置] [垂直位置] [ぼかし半径] [広がり] [色];
box-shadow: 0 4px 16px 0px rgba(0,0,0,0.15);
- 水平位置：影を右（正の値）や左（負の値）にずらす
- 垂直位置：影を下（正の値）や上（負の値）にずらす
- ぼかし半径：影のぼかし具合
- 広がり：影のサイズの広がり
- 色：影の色。
rgbaを使うと半透明にできる
※[広がり] [色] は省略が可能です。
影を複数重ねる
カンマ区切りで複数の影を指定できます。
style.css
.box {
/* box-shadowの部分だけ下記に差し替え */
box-shadow: 0 2px 4px rgba(0,0,0,0.6), 0 8px 16px rgba(0,0,0,0.3);
}
２段階で影がついているのがわかります。
インセットシャドウ
内側に影をつける場合はinsetを付けます。
style.css
.box {
/* box-shadowの部分だけ下記に差し替え */
box-shadow: inset 0 2px 8px rgba(0,0,0,0.2);
}
内側に影がついているのがわかります。
Tips
- 影が薄すぎると視認性が下がるので注意
- 黒一色ではなく、メインカラーの薄い色を使うと自然な印象に
-
transitionと組み合わせることで、マテリアルデザイン風の動きが簡単に実現可能 - 影を多用しすぎるとブラウザの描画負荷が上がる場合もあるので注意
- box-shadow.dev などオンラインツールを使うと直感的に値を調整できて便利
最後に
box-shadowは使いこなせばデザインの幅がグッと広がる便利なプロパティです。
ぜひいろいろなパターンを試して、あなたのサイトに合った「影」をデザインしてみてください！