CSS box-shadow ジェネレーター
直感的なUIで高度なCSSの影（box-shadow）を生成。
複数レイヤーや最新のデザイントレンドに対応した無料ツールです。
レイヤー設定
影のパラメータ
プレビュー
CSS Box Shadow ジェネレーターについて
CSS Box Shadow ジェネレーターは、直感的なUIでWebデザインに欠かせない影のスタイル（box-shadow）を生成する無料ツールです。
シンプルな影だけでなく、複数のレイヤーを重ねたリッチなシャドウ、Appleや最新のWebサービスで使われているような滑らかな影（スムースシャドウ）、立体感のあるニューモフィズム、あるいはあえてフラットな影をつけるネオブルータリズムなど、トレンドのスタイルをプリセットから一発で作成できます。
生成したコードは標準のCSSプロパティ、CSS変数（カスタムプロパティ）、Tailwind CSSのユーティリティクラス（Arbitrary values対応）の3形式で出力でき、ワンクリックでコピー可能です。
CSS Box Shadow ジェネレーターの使い方
ベースを選ぶ
上部のプリセットから作りたいイメージに近いものを選びます。もちろんゼロからレイヤーを追加して作ることも可能です。
影を調整する
X/Yのオフセット（位置）、ぼかしの強さ、広がり、色や不透明度を調整します。「レイヤー追加」で複数の影を重ねることで、より自然で高級感のある影になります。
コードをコピー
出力パネルからお使いの環境に合わせて「CSS」または「Tailwind」を選択し、クリップボードボタンを押してコードをコピーします。
CSS Box Shadow 関連用語集
box-shadow の構文とプロパティ
box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;
- offset-x / offset-y
- 影の水平・垂直方向の位置。正の値なら右・下へ、負の値なら左・上へ影が移動します。
- blur-radius (ぼかし)
- 影のぼやけ具合。値が大きいほど影は広く薄く広がり、0にするとくっきりとした境界（ソリッドシャドウ）になります。
- spread-radius (広がり)
- 影のサイズ自体を拡大・縮小します。正の値で要素より大きな影になり、負の値で要素より小さな影になります。
- inset (内側の影)
- このキーワードを指定すると、影が要素の外側ではなく内側に落ちるようになります。へこんだUIの表現などに使います。
CSS Box Shadow に関するよくある質問 (FAQ)
- Q. box-shadow はパフォーマンスに影響しますか？
- A. ぼかしの大きなシャドウや複数のレイヤーは描画コストがかかるため、モバイルデバイス等ではレンダリング（描画）が重くなる場合があります。アニメーションで box-shadow を動かす場合は特に注意が必要です。
- Q. box-shadow と filter: drop-shadow の違いは？
- A. box-shadow は要素のボックス（矩形）に対して影をつけます。一方、filter: drop-shadow() は要素の不透明な形状（透過PNGの輪郭など）に対して影を生成します。
- Q. inset はどのような表現で使いますか？
- A. ボタンの押下状態（へこみ効果）、テキストフィールドの内側の影、ニューモフィズムのハイライト描画などに使われます。
- Q. 複数の影を重ねるメリットは？
- A. 単一のぼかし影よりも、複数のレイヤーを重ねることでより自然でリアルな奥行きを表現できます。例えば、近い影（小さく濃い）と遠い影（大きく薄い）を重ねる手法が一般的です。
CSS Box Shadow の活用シーン
カードUIやモーダル
背景から要素を浮かび上がらせ、クリックできる要素や重要なコンテンツであることをユーザーに視覚的に伝えます。
ボタンのホバー・アクティブ状態
マウスホバー時に影を広げたり、クリック時に inset に切り替えたりすることで、押し心地のあるインタラクティブなボタンを実装できます。
ニューモフィズム・デザイン
背景色と同じ色の要素に対し、明るい影と暗い影を対角線上に配置することで、要素が押し出されたり凹んだりしているような質感を作ります。
グロー効果（発光）
オフセットを0にし、鮮やかな色で広がりをもたせることで、要素が光を放っているようなエフェクトをCSSだけで実現できます。
フィードバックを送信
ツールをより良くするためのご意見をお聞かせください。
現在、フィードバックの受付を一時停止しています
サーバーが混み合っているか、スパム防止のための安全装置が作動しています。しばらく経ってから再度アクセスしてください。