box-shadow:
    0px 4px 6px -1px rgba(0, 0, 0, 0.1);

無料オンラインCSSボックスシャドウジェネレータ — ビジュアルシャドウビルダー

ライブプレビュー付きで美しいCSSボックスシャドウを視覚的にデザイン。この無料のボックスシャドウジェネレータは、複数レイヤー、プリセット、インセットシャドウをサポートし、即座に使用可能なCSSコードを生成します。

ボックスシャドウジェネレータとは？

ボックスシャドウジェネレータは、ウェブデザイナーや開発者がCSS box-shadow値を手動で入力せずに作成するためのビジュアルツールです。数字を試行錯誤し、ブラウザをリロードする代わりに、スライダを調整し、リアルタイムで結果を見ることができます。

CSSの box-shadow プロパティは、要素の枠の周りに影の効果を追加します。現代のウェブインターフェースで深みや高さ、視覚的階層を作成するため、最もよく使われるCSSプロパティの1つです。

このボックスシャドウジェネレータの使用方法

1. プリセットを選択 — サブタレ、ミディアム、ストロングのシャドウから始めるか、またはからっ端から作成します。
2. スライダを調整 — オフセットX、オフセットY、ぼかし、拡散、色、不透明度を制御します。
3. インセットを切り替え — 外部シャドウと内部シャドウの切り替えを行います。
4. レイヤーを追加 — 複雑な効果のため複数のシャドウをスタックします。
5. プレビューをカスタマイズ — デザインに合わせて背景色とボックス色を変更します。
6. CSSをコピー — コピーをクリックして、スタイルシートにコードを貼り付けます。

主な機能

機能	ベネフィット
ライブプレビュー	スライダを調整するたびに即座に変更を確認
6つのプリセット	一般的なシャドウスタイルでクイックスタート
複数レイヤー	複雑でリアルな効果のためシャドウをスタック
インセットサポート	太陽のような凹んだ要素のための内部シャドウ作成
カラーピッカー	シャドウ色の完全な制御
不透明度制御	シャドウの透明度を微調整
クリップボードにコピー	1クリックでCSSエクスポート

CSSボックスシャドウの理解

構文

box-shadow CSSプロパティは次の構文に従います：

box-shadow: [inset] offsetX offsetY blur spread color;

値	説明	例
inset	(オプション) シャドウを内部にします	inset
offsetX	水平オフセット — 正 = 右、負 = 左	4px
offsetY	垂直オフセット — 正 = 下、負 = 上	4px
blur	ぼかし半径 — 大きいほどシャドウが柔らかくなります	12px
spread	サイズ拡張 — 正 = 大きい、負 = 小さい	0px
color	透明度付きシャドウ色	rgba(0,0,0,0.1)

複数シャドウ

カンマで区切って複数のシャドウをスタックさせることができます：

box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 10px 20px rgba(0, 0, 0, 0.05);

これにより、要素に近いタイトで暗いシャドウと、遠くに広がる柔らかく明るいシャドウの2レイヤーのシャドウが作成され、よりリアルな深み効果が得られます。

シャドウスタイル比較

スタイル	CSS	使用ケース
サブタレ	0 1px 3px rgba(0,0,0,0.08)	カード、リストアイテム
ミディアム	0 4px 6px rgba(0,0,0,0.1)	ボタン、モーダル
ストロング	0 10px 15px rgba(0,0,0,0.15)	ダイアログ、ポップオーバー
グロウ	0 0 20px rgba(59,130,246,0.4)	フォーカス状態、CTA
インナー	inset 0 2px 4px rgba(0,0,0,0.1)	インプット、ウェル
ハード	4px 4px 0 rgba(0,0,0,0.25)	レトロ/ブルータリスUI

実際の使用ケース

Material Designのエレベーション

Material Designでは、シャドウを使ってエレベーションレベルを示します。レベル1のカードは 0 1px 3px rgba(0,0,0,0.12) を使用し、レベル4のダイアログは 0 12px 17px rgba(0,0,0,0.14) を使用します。

ホバー効果

ホバー時にシャドウを深くして「浮かび上がる」効果を作成します：

.card { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.card:hover { box-shadow: 0 8px 16px rgba(0,0,0,0.15); }

フォーカス状態

アクセシビリティを考慮したフォーカスインジケータのためにグロウを使用します：

:focus { box-shadow: 0 0 0 2px rgba(59,130,246,0.5); }

ニューマテリアル

.new-material { box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.05); }

シャドウを改善するためのヒント

ヒント	説明
ぼかしを控えめに保つ	ぼかし半径を小さくすることで、より自然な効果が得られます
拡散を調整	要素の外側に広がるシャドウの範囲を調整します
色を統一	複数のシャドウを使用する場合、色を統一して全体の調和を保つ
不透明度を微調整	シャドウの透明度を調整して、背景とのバランスを取る
レイヤーを重ねる	複雑な効果を表現するため、複数のシャドウをスタックさせる