CSSボックスシャドウ ジェネレーター

使い方

1. 水平・垂直オフセットを調整して影の位置を設定します。
2. ぼかし半径で柔らかさを、広がり半径でサイズを設定します。
3. 色を選択し、不透明度を調整します。
4. 内側の影にするにはinsetをオンにします。
5. コピーボタンで生成されたCSSをコピーできます。

CSSボックスシャドウとは

CSSのbox-shadowプロパティは、要素のフレームの周囲に影の効果を追加します。オフセット、ぼかし半径、広がり半径、色、内側の影などを設定できます。カード、ボタン、モーダルなど、視覚的な奥行きや立体感が必要な要素に広く使われています。

値のリファレンス

• 水平オフセット：正の値は影を右に、負の値は左に移動します。
• 垂直オフセット：正の値は影を下に、負の値は上に移動します。
• ぼかし半径：値が大きいほど柔らかく拡散した影になります。0は鮮明なエッジです。
• 広がり半径：正の値は影を拡大し、負の値は縮小します。
• 内側の影（inset）：影を要素の内側に移動し、押し込まれた見た目を作ります。

活用シーン

• カードの立体感：カードに控えめな影を追加して、マテリアルデザイン風のレイヤー構造を表現。
• ボタンの状態表現：ホバーやアクティブ状態で影を使い、ボタンに押された感や浮き上がった感を演出。
• モーダルとポップアップ：オーバーレイ要素に強い影を適用して、背景との視覚的な分離を明確に。
• ニューモーフィズム：内側と外側の影を背景色に近い色で組み合わせ、柔らかく押し出された質感のデザインを作成。
• 画像ギャラリー：サムネイルや注目画像に影を追加して、ページ上で目立たせる。

デザインのコツ

• 複数の控えめな影を重ねると、よりリアルで自然な奥行き効果が生まれます。
• 影の色は純粋な黒ではなく、背景色に近い彩度を抑えた色を使うと自然に仕上がります。
• 大きなぼかし値と小さなオフセットの組み合わせは、モダンですっきりしたアンビエントシャドウを作ります。
• 内側の影は控えめに使いましょう。入力フィールドや押されたボタンには効果的ですが、広い面積では重く見えます。
• パフォーマンスに注意：多くの要素に複雑なbox-shadowを指定すると、低性能デバイスでレンダリング速度に影響が出ることがあります。

プライバシー

すべての処理はブラウザ内で完結します。データがサーバーに送信されることはありません。