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

CSS box-shadow 生成ツールの使い方

このツールは、CSS の box-shadow を視覚的に調整してコピーできるブラウザ内ジェネレーターです。各シャドウ層には X オフセット、Y オフセット、ぼかし半径、広がり、色、不透明度、内側影の切り替えがあり、値を変えるたびにプレビューと CSS 出力が更新されます。複数の層を追加できるため、単純なカード影だけでなく、Material 風の二重影、カラー影、ネオン風の発光、内側に沈んだ表現も作れます。出力は box-shadow: ...; 形式で、色は rgba と透明度で表されます。

プリセットから調整する

subtle、medium、large、dramatic、inset、colored、material、neon などのプリセットを選ぶと、代表的なシャドウ設定がすぐに反映されます。そこからスライダーで微調整すれば、ボタン、カード、モーダル、画像枠、ダッシュボードのパネルなどに合った影を作れます。右側の背景色も変更できるので、実際のページ背景に近い色で影の強さを確認できます。明るい背景では薄い透明度、濃い背景では色付きや広めのぼかしが見やすい場合があります。

実装時の注意

影は視覚階層を作る便利な表現ですが、強すぎると文字や隣接要素の可読性を下げます。小さなボタンには広がりを抑えた軽い影、大きなカードには Y オフセットとぼかしを少し大きくした影が向きます。ホバー状態を作る場合は、通常状態をコピーしてぼかしや透明度を少し増やすと自然です。生成された CSS はそのまま貼り付けられますが、デザインシステムでは変数やユーティリティクラスに整理して再利用すると管理しやすくなります。