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

ぼかしは影の輪郭をやわらげます。値が大きいほど影がぼやけて広がります。広がりは、ぼかしをかける前に影を大きくしたり小さくしたりします。広がりをマイナスにしてぼかしを大きくすると、最近のUIでよく見る、ふんわり浮いたような見た目になります。

実際の影は、物体の近くに濃く締まった芯があり、離れるほどやわらかく広がります。小さくシャープなレイヤーに、大きく薄いレイヤーを1～2枚重ねるとこれを再現でき、影1つよりずっと自然に見えます。

内側の影は、要素の外側ではなく内側に描かれる影です。表面がへこんだように見えるため、入力欄や押された状態のボタンによく合います。

はい。box-shadow、複数レイヤー、コードで使っているrgb()の色の書き方は、現在のすべてのブラウザでサポートされています。

動かない影の描画は軽い処理です。多くの要素に非常に大きなぼかしをかけたり、影そのものをアニメーションさせたりすると負荷が増えます。影をなめらかに動かしたい場合は、影を持たせた疑似要素の不透明度をフェードさせる方法がおすすめです。