CSSシャドウで奥行きをデザインする
このジェネレーターでできること
CSSの影には2種類あります。box-shadow は div やボタン、カードといった要素の四角い枠の周りに影を落とし、text-shadow は文字の一つひとつの背後に影を敷きます。このジェネレーターは両方に対応したビジュアルエディターで、水平・垂直のオフセット、ぼかし(blur)、広がり(spread)、色、不透明度をスライダーで調整でき、値を変えた瞬間にプレビューが描き直されます。狙いどおりの見た目になったら、対応するCSSがそのままコピーできる形で書き出されます。
ピクセル値を手作業で当て推量するのではなく、実際のボックス・ボタン・カード・見出しの上で影を整え、box-shadow や text-shadow の正確な宣言を読み取れます。
こんなときに使う
要素をページから浮き上がって見せたいときは box-shadow を使います。カードの Material 風の立体感、ふわりと浮かぶメニュー、押し込まれたボタンのへこんだ表現などです。text-shadow はタイポグラフィ向けで、にぎやかな背景から見出しを引き離す控えめな影や、ロゴ文字の背後に置く色付きのグロー(発光)に向いています。
既存のデザインを再現するのも手早く行えます。Material、Raised、Floating、Glow といったプリセットを出発点として読み込み、参照しているモックアップに影が合うまでオフセットと不透明度を微調整します。
例:影を重ねる
影が1つなら box-shadow: 0 4px 6px rgba(0,0,0,0.1); のように読めます。水平方向のオフセットはなし、下方向に4px、ぼかし6px、そして薄い半透明の黒です。本当の奥行きを出すには2つ重ねます。要素のすぐそばに置く小さく濃い影と、外側に広がる大きく柔らかい影です。レイヤーを追加すると、ツールがカンマでつないでくれます:box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.1);。各レイヤーは独自のオフセット・ぼかし・広がり・色を保ちます。
細かな注意点とエッジケース
Offset X と Y は影を右・下へ動かし(マイナス値なら左・上へ)、blur は輪郭をやわらげ、spread はぼかしをかける前に影を拡大・縮小します。この spread は text-shadow にはない性質です。Inset を有効にすると影が内側へ反転し、押し込まれたボタンやくぼんだ入力欄の見た目になります。文字の影は控えめに保ってください。強いぼかしや高い不透明度を文字の背後に置くと可読性を損ないます。満足したら、CSSをワンクリックでコピーするか、ダウンロードしてそのままスタイルシートに貼り付けられます。