🔲 CSS Box-Shadow ジェネレーター

概要

このツールは純粋なJavaScriptでブラウザ内だけで動作します。デザインデータはデバイス外に送信されることはありません。複数のシャドウレイヤーを重ねて、奥行き表現、ニューモーフィズム、グロー効果、カードの浮き上がりなどを自由に作れます。insetオプションで内側のグロー効果や押し込まれたボタン表現も可能。出力はどのスタイルシートやフレームワーク、デザイントークンにもそのまま貼り付けられる標準CSSです。

使い方

1. '+ シャドウを追加' をクリックして、最初のシャドウレイヤーを作成します。
2. Offset X、Offset Y、Blur、Spread、Opacityの各スライダーで影の形を調整します。'Inset'をオンにすると内側の影になります。
3. カラースウォッチをクリックして影の色を選びます。すべてのコントロールを調整するたびにリアルタイムプレビューが更新されます。
4. レイヤーをさらに追加して、ニューモーフィズムや重なるグロー効果のような複雑なマルチシャドウ表現を作りましょう。
5. 'CSS をコピー' をクリックして、完成した box-shadow の宣言をコピーし、スタイルシートに貼り付けます。

よくある質問

このCSS box-shadowジェネレーターは無料ですか？

はい、完全無料です。アカウント不要、試用期間なし、隠れた費用なし — ページを開けばすぐに影の生成を始められます。

インターネット接続なしでオフラインでも使えますか？

はい。このツールはサーバー通信なしでブラウザ内だけで動作します。ページが読み込まれたら、インターネットを切断しても問題なく使い続けられます。

デザインデータは安全ですか？何かアップロードされますか？

何もアップロードされません。すべての影の設定はブラウザ内でローカル処理され、localStorageにのみ保存されます。データがデバイス外に送信されることは一切ありません。

1つのCSSルールに複数の影を重ねることはできますか？

はい。'+ シャドウを追加' を必要なだけクリックしてください。すべてのレイヤーがカンマ区切りの単一のbox-shadow値にまとめられます — ニューモーフィズム、グロー効果、多方向の奥行き表現に最適です。

インセット（内側）シャドウ効果はどうやって作りますか？

任意のシャドウレイヤーで 'Inset' チェックボックスをオンにします。インセットシャドウは要素の境界内に表示され、押し込みボタンや内側グロー効果に便利です。生成されるCSSには 'inset' キーワードが自動的に含まれます。