🎨
無料CSS ボックス シャドウ ジェネレーター
ライブ プレビュー、マルチレイヤー スタッキング、カラー ピッカー、インセット切り替え、ワンクリック コピーを備えたCSS ボックス シャドウのビジュアル ビルダー。マテリアル、ニューモーフィズム、グローのプリセットが含まれています。
読み込み後はオフラインでも動作
プレビュー背景
ボックスをドラッグしてアクティブなレイヤーのシャドウを配置します（Shift キーを押しながら細かく調整）
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);プリセット
主な用途
- カードUIシャドウダッシュボード、製品グリッド、およびダッシュボード用のエレガントなカードシャドウを構築します。
- ボタンプレスエフェクト実世界の深さと押す状態を模倣するボタンシャドウを構築します。
- ニューモルフィズムソフトUIペアの明るい+暗いシャドウでソフトUIニューモルフィズムの外観を作成します。
- モーダルとポップオーバーシャドウダイアログとドロップダウンの高さと浮遊感を作成します。
- グロー効果とフォーカスリンググロー効果、フォーカスリング、ネオンスタイルのハイライトを作成します。
使い方
box-shadowジェネレーターは完全にクライアントサイドのReactツールです — サーバー、ライブラリは不要です。状態内にシャドウレイヤーオブジェクトのリストを保持し、変更のたびに手書きのrgba()フォーマッターを使って有効なCSS box-shadow文字列を組み立て、Reactのstyleプロップを介してプレビュー要素に直接適用することで、ブラウザ自体のレンダリングエンジンが結果を即座に描画します。
- 1レイヤーのパラメータがフォーマッターに渡される各シャドウレイヤーはx/yオフセット、ぼかし、広がり、16進カラー、不透明度の値を保持します。変更のたびに、小さなshadowToCss関数が正規表現を使って16進カラーをRGB成分に変換し、rgba()文字列を組み立てます — 例：0px 4px 12px 0px rgba(0, 0, 0, 0.15)。複数のレイヤーはカンマで結合されます。
- 2ブラウザがライブプレビューを描画する組み立てられた文字列はJSX内で直接div要素のboxShadowスタイルプロパティに割り当てられます。ReactがDOM属性を更新し、ブラウザのCSSエンジンが即座にシャドウを描画します — canvasやWebGLは関与せず、ネイティブのCSSレンダリングのみです。
- 3ドラッグでの位置指定にはPointer Events APIを使用プレビューボックスをクリック＆ドラッグすると要素上でsetPointerCaptureが呼び出され、onPointerMoveの差分を追跡してアクティブなレイヤーのx・yオフセットをリアルタイムで更新します。Shiftを押しながらだと0.25倍のスケールファクターが適用され、細かい位置調整ができます。
- 4出力はクリップボードにコピーされるツールは同じレイヤーデータから2つの出力形式を生成します：標準のCSS box-shadow宣言と、Tailwindの構文規則に従いスペースをアンダースコアに置き換えたTailwind任意値クラス（shadow-[...]）です。ワンクリックコピーはnavigator.clipboard.writeTextを使用します。