ボックスシャドウ生成
視覚的にCSSボックスシャドウを作成。リアルタイムプレビューとコードコピーに対応。
0
4
10
0
25
box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25);🐛
問題を報告
バグを見つけましたか？提案がありますか？このツールの改善にご協力ください。
これはどんなツールですか？
CSS box-shadow ジェネレーターは、本番環境で使える box-shadow 宣言をライブプレビュー付きで生成します。単層および多層のシャドウに対応し、水平／垂直オフセット、ぼかし半径、拡散半径、カラー、inset オプションを制御可能。CSS を手動で書かずに複雑なシャドウ効果をビジュアルに生成できます。
使い方
- 1
シャドウ層を追加
クリックして新しいシャドウ層を作成します。
- 2
パラメータを調整
各層の X/Y オフセット、ぼかし、拡散、カラー、不透明度を設定します。
- 3
プレビュー＆コピー
ライブプレビューを確認し、生成された CSS コードをコピーします。
よくある質問
box-shadow はどのように動作しますか？
box-shadow は要素の枠周りにシャドウ効果を追加します。構文：box-shadow: 水平オフセット 垂直オフセット ぼかし 拡散 カラー inset。複数のシャドウはコンマ区切りです。ブラウザは各シャドウ層を独立してレンダリングし、それらを合成します。複数の層を使用して複雑な奥行き効果を作成できます。
リアルなシャドウの作り方は？
リアルなシャドウは、オフセットに対してぼかしが大きい（通常 3〜5 倍）、透明度がやや低い（10〜30%）、暖色系のカラーを使用します。異なるぼかしサイズの多層シャドウにより、より自然な奥行き感を作成できます。Material Design は異なる高さに応じたシャドウ値を提供しています。
結果が正しくない場合はどうすればよいですか？
入力値を再確認してください。ツールは標準的な式を使用していますが、境界ケースでは手動での検証が必要な場合があります。