ボックスシャドウ生成

Box Shadow Generator

複数枚重ねたボックスシャドウとテキストシャドウをプレビューしながら組み立て、CSSを出力します。

影を層として組み立て、`box-shadow`、`text-shadow`、`drop-shadow()`フィルタのいずれかとして出します。知っておく価値があるのは、1層で正しくなることがほとんどないという点です。本物の影は、接地部の締まった濃い成分と、広くて薄い環境光の成分でできていて、影ひとつではそのどちらかにしかなれません。ページはそのことをしつこく言い、対象のプロパティが層のどの部分を表現できないかも伝えます。

🔒 ブラウザの中だけで動きますshadowcssgenerator

カード

適用先

面

1枚目内側
X オフセット 0pxY オフセット 1pxぼかし 3px広がり 0px
2枚目内側
X オフセット 0pxY オフセット 4pxぼかし 8px広がり -2px

プリセット

オフセットは高さにほぼ比例して、ぼかしはその平方根で大きくなります。平面の上の点光源が実際に作る形です。影が大きくなるほど不透明度は下がります。同じ遮りがより広い面積に散るからです。ここを逆にすると、手で調整した影が汚れのように見えます。

CSS

box-shadow: 0px 1px 3px rgb(0 0 0 / 0.1), 0px 4px 8px -2px rgb(0 0 0 / 0.08);

使い方

何に載せるかを指定します
カードやボタンなら`box-shadow`、文字なら`text-shadow`、アイコンや切り抜きのPNGのように本当に透明部分のあるものには`drop-shadow()`です。プレビューもそれに合わせて変わるので、いつも正しいものを見ていることになります。
プリセットから始めます
2層の重ねで、オフセットは高さに比例して、ぼかしはその平方根で伸び、影が広がるにつれて不透明度が下がります。手作業でいちばん逆にしやすいのが最後の点で、逆にすると影が汚れのように見えます。
面の色は実際に使うものに合わせます
白の上で調整した影は、灰色のページでは弱すぎ、暗いページでは強すぎます。面の色見本は、その部品が実際に載る背景に合わせて調整するためにあります。
層を調整します
層ごとにオフセット、ぼかし、広がり、色があり、insetのチェックボックスが付きます。アルファが要るときは色見本ではなく文字で入力してください。影の色はほとんどの場合半透明で、ネイティブの色入力はそれを表現できません。
宣言をコピーします
対象に応じてプロパティ名も変わるので、コピーしたものはそのまま貼り付けられます。

よくある質問

対象を切り替えたらinsetと広がりが消えました。どこへ行ったのですか。

落とされました。出力の上でページがそう伝えています。`text-shadow`の文法にinsetも広がりもありません。x、y、ぼかし、色だけです。`drop-shadow()`にもinsetと広がりはありません。それでも出せばブラウザが宣言をまるごと捨てる値になり、生き残れない部分を失うよりも悪い結果になります。

色見本が入力した値と一致しないのはなぜですか。

色見本は`<input type="color">`で、`#rrggbb`しか理解せず、アルファをまったく持ちません。入力した値をできるかぎり16進数にしたものを表示しているだけで、正となるのはテキスト欄のほうです。アルファの入った値はテキストのほうを編集してください。

`drop-shadow()`は遅い`box-shadow`にすぎませんか。

違います。答えている質問が別です。`box-shadow`はボーダーボックスをなぞるので、透明なPNGには長方形の影が付きます。`drop-shadow()`はアルファチャンネルをたどるので、実際の形をなぞります。合成のパスがひとつ増える代償があり、insetと広がりは使えません。形が大事なときはこちらを、それ以外は`box-shadow`を使ってください。