CSSシャドウ作成 (box-shadow・text-shadow)

box-shadow、text-shadow、filter: drop-shadow()をスライダーで調整し、複数の影のレイヤーを重ねてCSSを取得します。カードやボタンの奥行き、内側に押し込まれた見え方、文字の輪郭線を、プレビューを見ながら決めるときに使います。

使い方

1. 「種類」でbox-shadow、text-shadow、filter: drop-shadowのいずれかを選びます。
2. 「影のレイヤー」の各レイヤーで「横のずれ」「縦のずれ」「ぼかし」「広がり」(box-shadowのみ)、「影の色」「不透明度」を設定します。「内側」をオンにすると内側の影になります。
3. 「レイヤーを追加」または「複製」でレイヤーを増やし、矢印で順序を入れ替えます。レイヤーのチェックを外すと、そのレイヤーは一時的に除外されます。
4. 左のプレビューで「背景色」「カードの色」「角の丸み」「カードのサイズ」を実際の画面に近づけます。
5. 必要なら「プリセット」から出発点を選び、CSSの横の「コピー」を押します。

計算方法と補足

• box-shadowの1レイヤーは「[inset] x y ぼかし 広がり 色」の順に書きます。広がりが正の値なら影が大きくなり、負の値なら小さくなります。text-shadowには広がりと内側がありません。
• filter: drop-shadow()はボックスではなく、見えている形(PNGアイコンやSVG)に沿って影を作ります。関数を続けて書くと重なります。
• 色は不透明ならHEX、そうでなければrgb(r g b / a)で書きます。自然な奥行きは、不透明度の低いレイヤーを2〜3枚、ぼかしを段階的に大きくして重ねると得られることが多いです。
• レイヤーとプレビューの設定はこのブラウザーに保存されます。

よくある質問

box-shadowの値の順序はどうなっていますか。

横のずれ、縦のずれ、ぼかし、広がり、色の順で、内側の影にする場合は先頭にinsetを置きます。例: box-shadow: 0 4px 12px rgb(0 0 0 / 0.15)。

カードに自然な影を付けるにはどうすればよいですか。

不透明度10〜20%のレイヤーを2〜3枚重ね、縦のずれとぼかしを段階的に大きくします。プリセットの「中程度の立体感」と「やわらかい5層」はその方法で作られています。

text-shadowで文字の輪郭線を作れますか。

はい。ぼかし0の影を4方向(1px 1px、-1px -1px、1px -1px、-1px 1px)に置くと細い輪郭線になります。「文字の輪郭線」プリセットがまさにそれです。

box-shadowとdrop-shadowフィルターの違いは何ですか。

box-shadowは要素の四角いボックスに、drop-shadowフィルターは見えている形に影を付けます。透明な背景のアイコンやSVGにはdrop-shadowが適しています。