Utilore

CSS 影ジェネレーター

スライダーを動かすと見本も一緒に変わります。影ひとつで足りないときはレイヤーを重ねてください。実際の画面にある柔らかく自然な奥行きは、こうして作られています。

レイヤー

プリセット

使い方

  1. 影をつける相手を選びます。ブロックか、文字か。
  2. 位置・ぼかし・色を決めます。見本はすぐに描き直されます。
  3. 奥行きが欲しければレイヤーを足します。薄い影を 2〜3 枚重ねるほうが、濃い影 1 枚よりきれいです。
  4. 設定の下にある CSS の行をコピーします。

知っておくと便利

文字の影で設定が少ない理由

text-shadow プロパティが受け取るのは位置・ぼかし・色だけです。広がりと内側モードは box-shadow 専用で、値がひとつ多いだけで宣言全体が無効になります。ブラウザーは黙って捨て、影はまるごと消えてしまいます。だから文字モードではこの 2 つの操作を隠し、「無視されるだろう」と期待はしません。

薄いレイヤーを重ねるほうが濃い影 1 枚より良い

本物の影は均一ではありません。物のすぐ下では濃く、離れるほど溶けていきます。大きくぼかした影 1 枚では灰色の輪ができるだけですが、位置をずらした薄い影を 2〜3 枚重ねると、丁寧に作られた画面にある奥行きが出ます。このツールはレイヤーごとに値を保ち、コピーされる行にも順番どおり並びます。

よくある質問

「広がり」は何のためにありますか。

ぼかしがかかる前に影を大きく、または小さくします。負の値は影を内側に引き寄せ、横からはみ出さないようにします。カードのすっきりした影はこの手を使っており、にじみはブロックの下に留まり、周囲には広がりません。

内側の影はどう作りますか。

「内側の影」にチェックを入れると行頭に inset が付き、影がブロックの内側へ移ります。押された状態のボタンや入力欄で使われ、奥行きが「へこみ」として読まれるべき場面に向きます。

影が見えないのはなぜですか。

たいていは不透明度が 0 になっているか、位置とぼかしがどちらも 0 で影がブロックの真後ろに隠れています。親要素に overflow: hidden があり、影が表示範囲の外に落ちている場合も見えなくなります。

どのブラウザーでも動きますか。

はい。box-shadow も text-shadow も何年も前から標準で、接頭辞は不要です。ここで作られる値はベンダー拡張のない普通の CSS です。

関連ツール