CSSシャドウを視覚的にデザイン
シャドウ（影）はインターフェースに奥行きを与えます。カードをページから浮き上がらせたり、どのボタンが押されているかを示したり、ダイアログを背後のコンテンツから分離したりする役割を果たします。CSSの box-shadow プロパティは強力ですが、5つの数値をコードだけで微調整するのは困難です。このジェネレーターを使えば、スライダーとリアルタイムのプレビューで直感的に調整でき、複数のシャドウを重ねて自然な立体感を作り出せます。プロジェクトにそのまま貼り付けられるクリーンなCSSを出力します。
機能
- オフセット、ぼかし、広がり、色、不透明度をスライダーで調整し、即座にプレビュー。
- 最大5つのレイヤーを組み合わせて1つの
box-shadowを作成。 - 押し込まれたような凹み効果を表現できる内側（inset）シャドウ。
- デザインに合わせて**角丸（border-radius）**やプレビューの背景色を変更可能。
- ソフト、ミディアム、ハード、レイヤー、内側、グロー（発光）などのプリセットを用意。
rgba()形式の色指定で、すぐにコピーして使えるCSSを出力。
例
明るい背景に馴染む、自然なレイヤーシャドウの例：
.card {
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.07),
0px 4px 8px 0px rgba(0, 0, 0, 0.07),
0px 16px 32px 0px rgba(0, 0, 0, 0.07);
border-radius: 16px;
}
シャドウデザインのヒント
| 目的 | おすすめの設定 |
|---|---|
| 白背景の控えめなカード | y 4、ぼかし 12、不透明度 8% |
| 浮き上がるドロップダウンやダイアログ | 2〜3レイヤー、y 最大24、ぼかし 最大48、不透明度 各7〜12% |
| レトロな「フラット」デザイン | x 6、y 6、ぼかし 0、不透明度 100% |
| フォーカスやグロー（発光）効果 | x 0、y 0、ぼかし 16〜24、広がり 2〜4、ブランドカラー |
| 押し込まれた入力フィールド | inset（内側）、y 2、ぼかし 6、不透明度 25〜30% |
光源は統一しましょう。あるコンポーネントの影が下に向かっているなら、他のすべての影も下に向ける必要があります。
関連ツール
CSSグラデーションジェネレーターでカードの背景を作成したり、カラーコード変換ツールでHEX、RGB、HSL間のカラーコードを変換したり、画像カラーピッカーでスクリーンショットから色を抽出できます。