無料オンラインCSSボックスシャドウジェネレーター
オフセット、ぼかし、広がり、色のコントロールでCSSボックスシャドウを視覚的に構築します。
Who uses the CSSボックスシャドウジェネレーター?
- デザインシステムの仕様に合ったカード・ボタンの影を生成するUI開発者。
- 視覚的で即座にフィードバックが得られるインターフェースを通じて影のプロパティを探るCSS学習者。
- 開発者に引き継ぐ前にモックアップ用の影の効果を作成・テストするデザイナー。
How the CSSボックスシャドウジェネレーター works
X オフセット、Y オフセット、ぼかし半径、広がり半径のスライダーを調整して、影の形を整えます。
カラースウォッチをクリックして影の色を選び、隣の透明度スライダーを使います。
内側の影効果にはInsetを切り替えます。
コード出力パネルからCSSをコピーします。
Tips & tricks
- このツールは1つの影の層を出力します——Material Designの高さのような多層効果には、各層をここで個別に生成し、カンマで手動で組み合わせてください。
- 負の広がりと大きめのぼかしを組み合わせると、柔らかく拡散した影になり、正の広がりで引き締まった影よりも「浮いている」ように見えます。
- 内側の影は押されたボタンの状態にうまく機能します——小さめのぼかしと低い不透明度の暗い色を試してみてください。
- 透明度スライダーは影の色のアルファチャンネルを制御するもので、要素自体の透明度ではありません。
Frequently Asked Questions
CSSのbox-shadow構文は？
box-shadow: [inset] Xオフセット Yオフセット ぼかし半径 広がり半径 色。例：box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)。複数の影はカンマで区切ります。
広がり半径は何をしますか？
広がり半径はぼかす前に影を拡大または縮小します。正の値は影を要素より大きくし、負の値は縮小します。-4pxの広がりと8pxのぼかしを組み合わせると、焦点の合った方向性のある影ができます。
内側の影（inset）とは何ですか？
Insetのチェックボックスをオンにすると、影が要素の外側ではなく境界の内側に表示されます。内側の影は、押された/くぼんだボタンの状態、埋め込みカードの効果、内側の光の効果を作り出します。
このツールはMaterial Designの高さのように複数の影の層を重ねて生成できますか？
いいえ——このツールは一度に1つの影の層のみを生成します。Material Designの高さのような多層効果（box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0px rgba(0,0,0,0.14), 0 1px 10px 0px rgba(0,0,0,0.12)）には、各層をここで個別に生成し、カンマ区切りの値を手動で組み合わせてください。
box-shadowはレイアウトに影響したり、スペースを取ったりしますか？
いいえ。marginやpaddingとは異なり、box-shadowはレイアウトに影響しません——影のある要素が隣接する要素を押しのけることはありません。そのため、ページのレイアウトを崩すことなく安全に影を追加できます。
Is my data safe when using the CSSボックスシャドウジェネレーター?
Completely safe. The CSSボックスシャドウジェネレーター processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the CSSボックスシャドウジェネレーター output in commercial projects?
Yes. The CSSボックスシャドウジェネレーター is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the CSSボックスシャドウジェネレーター follow official standards?
Yes. The CSSボックスシャドウジェネレーター is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.