Box Shadow ジェネレーター

類似ツール：CSS とデザイン

コードを見栄えのよい共有用画像に変換。複数のテーマに対応

線形・放射状・円錐グラデーションを視覚的にデザインし、CSS コードをすぐにコピー

?

まだコメントはありません。最初のコメントを書いてみましょう！

Box Shadow ジェネレーターでは、スライダーで影の効果をリアルタイムに調整できます。複数の影を重ねることができ、Material、Neumorphism、Neon など厳選プリセット 8 種を用意。調整後はそのまま CSS コードをコピーできます。

調整できるパラメータは 5 つ：X オフセット（左右）、Y オフセット（上下）、ぼかし半径（輪郭のやわらかさ）、拡散半径（全体の大きさ）、不透明度。それぞれ専用のスライダーがあります。
複数レイヤーの影：「シャドウレイヤーを追加」をクリックすると複数の影を重ねられます。実際のデザインでは、より自然な立体感を出すために 2～3 層の影を重ねることが多く、Material Design でも使われています。
Inset（内側の影）：Inset をオンにすると影が要素の内側に反転します。押し込まれたボタンやくぼんだカードの表現によく使われます。
プレビュー背景 3 種：ライト、ダーク、グラデーションを切り替えて、さまざまな下地で影の見え方を確認できます。
厳選プリセット 8 種：Flat（影なし）、Subtle（控えめな影）、Card（カード）、Material（Material Design の 3 層）、Dramatic（奥行きの深い影）、Neon Blue（ネオン）、Neumorphism（ニューモーフィズム）、Inset（内側の影）。
ワンクリックで CSS をコピー：box-shadow: ...; 構文をそのまま取得でき、CSS や Tailwind の style 属性、各種デザインツールに貼り付けられます。

Box Shadow ジェネレーターにはどんな設定項目がありますか？

X/Y オフセット、ぼかし、拡散、不透明度付きの色、inset（内側の影）、そして複数レイヤーの重ね合わせに対応しています。

複数の影を同時に設定できますか？

はい。「シャドウを追加」をクリックすると、複数の box-shadow レイヤーを重ねられます。

生成された CSS はどのように使いますか？

出力された CSS をコピーして、スタイルシートまたはインラインスタイルに貼り付けてください。