タスクの道筋 / 入力から結果へ
CSS のボックスシャドウを作る方法
- 01
シャドウの位置を決める
「水平オフセット」と「垂直オフセット」を、それぞれ -80〜80 px の範囲で設定します。負の値はシャドウを左や上に押し出し、ゼロならカードの背後に中央配置されます。初期状態は右に 12 px、下に 18 px という、定番のドロップシャドウの配置です。
- 02
ぼかしと拡散を調整する
「ぼかし半径」を 0〜120 px で調整して柔らかさを決め（デフォルトは 32 px）、「拡散半径」を -40〜60 px で調整して、ぼかしがかかる前にシャドウを拡大・縮小します。デフォルトの拡散 -4 px はシャドウをわずかに引き締め、輪郭をシャープにします。
- 03
色と不透明度を設定する
6 桁の「シャドウカラー」を選び（デフォルトの #0b0d12 はほぼ黒）、「シャドウの不透明度」を 0.01 刻みで 0〜1 の範囲に設定します。不透明度は出力の rgba() カラーのアルファチャンネルになるので、0.28 は rgba(11, 13, 18, 0.28) としてレンダリングされます。
- 04
インセットモードを切り替える
「インセットシャドウ」をオンにするとシャドウがボックスの内側に移り、押し込まれた・くぼんだ表面に見えます。入力フィールドやトグルされたボタンに便利です。トグルがオンのとき、生成される宣言の先頭に inset キーワードが付きます。
- 05
サンプルと比較する
「サンプルを読み込む」を押すと、シャープな参照スタイル（両軸 8 px のオフセット、ぼかし・拡散ともにゼロ、#0f4cff、不透明度 0.35 のハードなオフセットアウトライン）が入力されます。「リセット」で柔らかいデフォルトのシャドウに戻り、ライブプレビューは変更のたびに再レンダリングされます。
- 06
CSS をコピーまたはダウンロードする
「CSS をコピー」で .shadow-card ルールをコピーするか、「.css をダウンロード」で toolars-box-shadow.css として保存します。値が範囲外の間はコピーがブロックされるため、貼り付ける宣言は常に有効です。