Developer Tools
Web Utilities
Image ToolsCSS ボックスシャドウジェネレーター
複数のレイヤーとリアルタイムプレビューでCSSのbox-shadow効果を視覚的に作成。ぼかし、拡散、色、不透明度をカスタマイズ。
シャドウ設定
レイヤー 1
プレビューとCSSコード
.box-element {
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.3);
background-color: #ffffff;
border-radius: 8px;
}0px 4px 6px 0px rgba(0, 0, 0, 0.3)関連ツール
このツールについて
使い方
- 複数のレイヤーでCSSのbox-shadow効果を視覚的に作成
- シャドウの位置を決める水平・垂直オフセットを調整
- シャドウの柔らかさとサイズのぼかし半径と拡散を制御
- 不透明度制御でシャドウカラーをカスタマイズ
- 内部グロー効果のためのinsetシャドウを追加
- 複雑な深み効果のために複数のシャドウを重ねる
よくある使用例
- カードデザインに深みと立体感を作る
- ボタンやUI要素に微妙なシャドウを追加
- ニューモーフィック（ソフトUI）インターフェースのデザイン
- コールトゥアクション要素のグロー効果を作成
- マテリアルデザインのシャドウ仕様を実装
- フローティングと浮き上がった要素効果を作成
よくある質問
CSSのbox shadowとは何ですか？
Box shadowはCSSプロパティで、要素のフレームの周りにシャドウ効果を追加します。位置、ぼかし、拡散、色を指定できるシャドウでデザインに深みと立体感を作れます。
複数のシャドウレイヤーを追加するには？
'+ レイヤーを追加'ボタンをクリックして、要素にシャドウレイヤーを追加します。各レイヤーは、異なる位置、ぼかし、拡散、色、不透明度で独立してカスタマイズできます。
各シャドウパラメーターは何を制御しますか？
水平オフセットはシャドウを左（負）または右（正）に移動します。垂直オフセットは上（負）または下（正）に移動します。ぼかし半径はシャドウの柔らかさを制御します。
inset shadowとは何ですか？
Inset shadowは要素の境界線の外ではなく内側に描かれます。要素が表面に押し込まれているような外観を作ります。シャドウレイヤーの'Inset'チェックボックスをオンにします。
ニューモーフィック効果を作るには？
ニューモーフィズムは明るいシャドウと暗いシャドウを反対側に配置した2つのシャドウを使います。'ニューモーフィズム'または'ニューモーフィズム Inset'プリセットを出発点として使用します。
負の拡散値を使えますか？
はい！負の拡散値はぼかしを適用する前にシャドウを内側に縮小します。マテリアルデザインでより現実的な集中したシャドウを作るために使われます。
CSSコードをコピーするには？
2つのコピーオプションがあります：'CSSをコピー'は完全なCSSルールを提供し、'値をコピー'はbox-shadow値のみを提供します。
シャドウのプリセットスタイルは何ですか？
ツールには12のプリセットが含まれています：ソフト、ミディアム、ラージ、エクストララージ、インナー、アウトライン、ニューモーフィズム、ニューモーフィズムInset、カラフル、グロー、リフテッド、フローティング。
box shadowでグロー効果を作れますか？
はい！'グロー'プリセットを使うか、水平・垂直オフセットを0に設定し、大きなぼかし半径（20px以上）と鮮やかな色を選択して独自のものを作成できます。
シャドウの不透明度はどのように機能しますか？
不透明度はシャドウの透明度を0（完全透明）から1（完全不透明）で制御します。低い不透明度は微妙なシャドウを、高い不透明度はより劇的なシャドウを作ります。
box shadowはすべてのブラウザでサポートされていますか？
はい、CSS box-shadowプロパティはChrome、Firefox、Safari、Edge、モバイルブラウザを含むすべてのモダンブラウザで広くサポートされています。ベンダープレフィックスは不要です。
box shadowをアニメーション化できますか？
はい、box shadowはCSSトランジションやアニメーションでアニメーション化できます。box-shadowにtransitionプロパティを使用します：'transition: box-shadow 0.3s ease'。