プリセット
box-shadow: 0px 10px 20px -4px rgba(0,0,0,0.25);
機能の説明
レイヤー化された CSS box-shadow 値を、ライブプレビューとコピー可能な出力付きで設計します。各レイヤーは標準の 5 つのプロパティ - オフセット X、オフセット Y、ぼかし、広がり、色 - に加えて inset トグルと 0〜1 の不透明度スライダーを持ち、その値は出力時に rgba() 色へと合成されます。必要なだけレイヤーを重ねられます。レイヤーはリスト順にカンマ連結されて出力され、CSS が期待する形式そのままになります。
5 つのワンクリックプリセット（Soft、Sharp、Elevated、Inner、Glow）が、実績のある組み合わせ - シングルレイヤーのデフォルトに加え 2 レイヤーの「Elevated」スタック - で現在のレイヤーを置き換えます。プレビューステージは、色を制御できる角丸ボックスにシャドウを描画し、不透明度を判断するための背景（無地 / チェッカー / 分割）を選べます。100% クライアントサイドで動作します。
使い方
- ツールバーのプリセットをクリックして実績のあるシャドウから開始するか、初期のソフトレイヤーを直接編集します。Reset はデフォルトの単一ソフトレイヤーに戻します。
- Stage で、プレビューの背景（Plain / Checker / Split）を選び、スウォッチピッカーでボックスの色を設定します。
- 各 Layer セクションのコントロールを調整します：
- Inset - 外側ではなくボックスの内側にシャドウを描画します。
- Color - レイヤーの基本色（スウォッチピッカー、hex）。
- Offset X / Offset Y - ピクセル単位の位置。負の値も有効です。
- Blur - ピクセル単位のぼかし半径（最小 0）。
- Spread - シャドウを拡大または縮小します。負の値で引き締めます。
- Opacity - 0〜1 のスライダー。出力される
rgba()色に合成されます。
- Add layer をクリックしてシャドウをもう 1 つ重ねます（例：広いアンビエントの下に密着したコンタクトシャドウ）。レイヤーの削除は各セクションのゴミ箱ボタンで行います - 最後のレイヤーは削除できません。
- 編集するとライブプレビューが即座に更新されます。
- CSS 出力の Copy をクリックして完成した宣言を取得します。
例
5 つのプリセットがインストールするレイヤー値そのものに対して src/lib/boxShadow.ts の buildBoxShadow() を実行して検証済み：
Soft（ツールの初期状態でもあります）
box-shadow: 0px 10px 20px -4px rgba(0,0,0,0.25);Elevated - 2 レイヤー、密着コンタクト + 広いアンビエント：
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.1), 0px 12px 28px -6px rgba(0,0,0,0.28);Inner
box-shadow: inset 0px 2px 6px 0px rgba(0,0,0,0.35);Glow - 色付きでオフセットゼロのシャドウ：
box-shadow: 0px 0px 24px 2px rgba(59,130,246,0.45);Sharp: box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.3);
補足事項
- プライベート: 生成はローカルで行われます。何もアップロードされません。
- レイヤーはリスト順にカンマ連結で出力されます - CSS では最初のレイヤーが最前面に描画されるため、順序は視覚的に重要です。
- 不透明度はレイヤーごとに
rgba()で適用されるため、濃い黒のコンタクトシャドウと淡い色付きグローを 1 つの宣言で混在させられます。 - Split 背景はシャドウを明るい面と暗い面の両方で同時に表示します - 両テーマで機能すべきシャドウを確認する最速の方法です。
- 負の spread（プリセットでは
-4px、-6px）は、大きなぼかしがボックスの端からはみ出すのを防ぎます。 - 関連ツール: CSS Gradient Generator、Glassmorphism Generator、Color Picker & Converter