Box Shadow ジェネレーター
このボックスシャドウ作成ツールは、X・Y オフセット、ぼかし、広がり、色、不透明度、inset のスライダーと、Material Design や Tailwind のプリセットで CSS の box-shadow を作り、正確な CSS を出力します。
このツールについて
このボックスシャドウ作成ツールは、X・Y オフセット、ぼかし、広がり、色、不透明度、inset のスライダーと、Material Design や Tailwind のプリセットで CSS の box-shadow を作り、正確な CSS を出力します。
使い方
- プリセットから始めるか、「カスタム」のままにします。
- X/Y オフセット、ぼかし、広がり、不透明度を調整します。
- 影の色を選び、内側の影にするには「Inset」にチェックを入れます。
- 「CSS をコピー」をクリックし、box-shadow のルールを貼り付けます。
知っておきたいこと
- box-shadow の構文は [inset] offset-x offset-y blur-radius spread-radius color です。
- ぼかしの半径を大きくすると縁が柔らかくなり、広がりはぼかす前に影を大きくしたり小さくしたりします。
- 不透明度の低い暗い影（10–25% 程度）は、真っ黒な影より自然に見えます。
- 複数の影は、カンマで区切って重ねられます。
- inset キーワードを使うと、要素のボーダーの内側に影が描かれます。
すべてブラウザ内で動作します。入力した内容がアップロード・保存されることはありません。
よくある質問
CSS で div に影を付けるには？
box-shadow プロパティを使います。たとえば box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2); です。このツールが値を作成します。
ぼかしと広がりの違いは何ですか？
ぼかしは影の縁の柔らかさを調整します。広がりは、ぼかしを適用する前に影のサイズを拡大・縮小します。
内側の影を作るには？
値の先頭に inset キーワードを加えるか、ツールで「Inset」にチェックを入れます。
box-shadow を複数使えますか？
はい。影をカンマで区切ります。Material や Tailwind のプリセットのように影を重ねると、よりリアルに見えます。