CSSボックスシャドウジェネレーター

スライダーでCSS box-shadowプロパティを視覚的に生成します。リアルタイムプレビューを確認してCSSコードをコピーできます。

スタジオ · ニュートラル環境

X0px

Y8px

ぼかし24px

広がり-6px

不透明度14%

色

CSS

機能

スライダーで調整

カラーピッカー

内側シャドウの切り替え

複数レイヤーに対応

プレビューと CSS を同時表示

使い方

1. スライダーで影を調整します — ステージのニュートラルなカードが実際の見た目そのままを表示します。

2. 実際の影は多層です：最大 4 層まで追加でき、プリセット（ソフト / 浮き上がり / フローティング / 内側の影）から始めることもできます。

3. 下地を切り替えて白・グレー・ダーク背景で影を確認し、CSS をコピーします。

このツールについて

UI でリアルに見える影は、たいてい1層ではありません。接地感を出す濃く狭い影と、距離感を出す広く柔らかい影の組み合わせです。このジェネレーターでは最大4層の box-shadow を重ね、各層の水平・垂直オフセット、ぼかし、広がり、色、不透明度、内側の影を調整でき、ステージ上のニュートラルなカードに正確な結果が表示されます。「ソフト」「浮き上がり」「フローティング」「内側の影」のプリセットから始めることもでき、ステージを白・グレー・暗い面に切り替えてどの背景でも影が伝わるか確認できます。生成される CSS は各層を正しい順番で rgba の色とともに並べるので、スタイルシートやデザイントークンにそのまま貼り付けられます。

よくある質問

オフセット、ぼかし、広がりとは何ですか？

X・Y オフセットは影を右と下に動かします（負の値は左と上）。ぼかしは影の縁を柔らかくし、値が大きいほど拡散します。広がりはぼかす前に影を大きくしたり小さくしたりするもので、負の値にすると柔らかい影を要素の下に収められます。

なぜ影を複数重ねるのですか？

実際の物体は、面に近いところにはっきりした影を、離れたところには柔らかい影を落とします。小さく濃い層と大きく薄い層を組み合わせると、1つの重い影より自然に見え、多くのデザインシステムもこの方法で高さを表現しています。

内側の影（inset）は何に使いますか？

inset の影は要素の外側ではなく内側に描かれ、へこんで見えます。入力欄、くぼみ、トグルスイッチなどによく使われます。

影はパフォーマンスに影響しますか？

静的な影の負荷はわずかです。多くの要素で box-shadow をアニメーションさせると再描画が発生するので、ホバー効果には影を付けた疑似要素の不透明度をアニメーションさせるか、ぼかしの値を控えめにしてください。

暗い背景だと影の見え方が違うのはなぜですか？

暗い影は暗い面の上ではコントラストが失われます。ダークテーマでは影の不透明度を下げ、代わりに明るめの面の色や細い枠線で高さを表現することが多いです。

CSSボックスシャドウジェネレーター

機能

使い方

このツールについて

よくある質問

関連ツール