CSSボックスシャドウジェネレーター
CSSのbox-shadowの値を視覚的に構築できます。オフセット、ぼかし、広がり、色をライブプレビューで調整できます。
CSS出力
box-shadow: 0px 4px 12px 0px #00000026;PixConvertのボックスシャドウジェネレーターを使う理由
視覚的なボックスシャドウエディタ ― 値を推測する必要はありません。ドラッグしてプレビューするだけです。
ライブプレビュー
リアルなカードプレビューに自分の影が表示されます。スライダーを変更するたびに、影が即座に更新されます。
複数の影レイヤー
複数のシャドウレイヤーを重ねることで、高度な奥行き効果が得られます。各レイヤーは独立して制御可能です。
内側の影
押下効果や内部発光スタイルを有効にするには、インセットモードを切り替えてください。
色 + 不透明度
影の色は、個別の不透明度スライダーで選択できます。出力は正確な透明度を実現するためにRGBAを使用します。
準備完了のCSS出力
出力は有効なbox-shadow CSS値文字列です。スタイルシートまたはデザイントークンに直接貼り付けてください。
100%プライベート
完全にクライアントサイドで動作し、サーバーもデータ収集も行いません。
ボックスシャドウの使用例
影はUIデザインにおいて奥行きと階層性を生み出す。
カードの高さ
カード、モーダル、パネルに、マテリアルデザイン風の立体的な影を作成します。
- 標高1-24の影のスケール
- 浮遊するアクションボタンの影
- ダイアログオーバーレイの影
ボタンの深さ
ボタンに微妙なドロップシャドウと押下時の効果を追加して、立体感を演出します。
- マウスオーバー時にさりげないドロップシャドウが表示される
- 押下状態を示すインセットシャドウ
- 色付きの光る効果
ニューモルフィズム
レイヤー化された明暗の影を使用して、ニューモルフィックなUIコンポーネントを構築します。
- 明るい影と暗い影のレイヤー
- ソフトUIの隆起要素
- 凹型コントロールを埋め込み式で操作
ボックスシャドウの作成方法
スライダーを使って、Xオフセット、Yオフセット、ぼかし半径、および広がりを調整します。影の色と不透明度を選択します。
ライブプレビューの更新を即座に確認できます。CSS値をコピーしてスタイルシートに貼り付けてください。
影の埋め込みを切り替えたり、複数の影を重ねてレイヤー効果を作成したりできます。出力はカンマ区切りで、すぐに貼り付け可能です。
その他のツールを見る
このツールと併用すると非常に便利な他の無料ツールも見つけてみましょう。
よくある質問
CSSのbox-shadowについて解説します。
box-shadowのパラメータとは何ですか？
box-shadow: [inset] x-offset y-offset blur-radius spread-radius color。X/Yオフセット: 影の位置。Blur: ぼかしの度合い (0 = エッジが硬い)。Spread: サイズの拡大 (負の値 = 小さい)。Inset: 要素の内側に影を描画します。
柔らかな影を作るにはどうすればいいですか？
ぼかし半径を大きくし（20～40ピクセル）、スプレッドを0付近に保ち、透明度の低い色（rgba(0,0,0,0.1～0.2)）を使用します。わずかにオフセットします（y: 4～8ピクセル）。これにより、デザインシステムでよく見られる現代的な「ソフトドロップシャドウ」が作成されます。
複数の影を重ねることはできますか？
はい。CSSでは、カンマで区切られた複数の影の値を指定できます。例：box-shadow: shadow1, shadow2, shadow3。「影レイヤーを追加」ボタンを使用すると、ニューモフィズムや多色グローなどのレイヤー効果を作成できます。
ぼかしと拡散の違いは何ですか？
ぼかしは影の輪郭の柔らかさを制御します。ぼかしが大きいほど、影はぼやけます。拡散は影のサイズを制御します。拡散が正の値の場合、影は要素よりも大きくなり、負の値の場合、影は小さくなります。拡散はぼかしには影響しません。
ボックスシャドウはレイアウトに影響しますか？
いいえ。box-shadowはボックスモデルの外側にレンダリングされるため、要素のサイズ、位置、ドキュメントの流れには影響しません。影のために要素の周囲にスペースが必要な場合は、代わりにmarginまたはpaddingを使用してください。