CSS box-shadow作成 — 影をリアルタイムでプレビュー

使い方

1. 水平・垂直オフセットで影の位置を決めます。
2. ぼかしと広がりで、影のやわらかさと大きさを調整します。
3. 色と不透明度を選びます。要素の内側に影を付けるには、内側の影をオンにします。
4. リアルタイムのプレビューを確認し、生成された box-shadow 宣言をコピーします。

各値の意味

水平オフセットは正の値で右、負の値で左に動きます。垂直オフセットは正の値で下、負の値で上に動きます。ぼかしは0以上で、大きいほど境界がやわらかくなります。広がりは正の値で影の形を大きく、負の値で小さくします。

色はアルファ値付きのRGBチャンネルで出力します。たとえば不透明度25%は rgba(0, 0, 0, 0.25) になります。内側の影をオンにすると、影の値の先頭に inset が付きます。

例

box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.25); は、下に8ピクセルずれたやわらかい黒い影を作ります。水平オフセットが0なので、左右のバランスが取れています。

影を引き締めたいときは、負の広がりと小さめのぼかしを比べてみてください。両者は効果の異なる部分を変えます。内側の影は、内部の余白によって見える影の量が変わるので、コンポーネントの最終的なサイズで確認してください。

制限と適用

オフセットと広がりは-100〜100ピクセル、ぼかしは0〜200ピクセル、不透明度は0〜100%です。このツールが作る影は1つです。重ねた影が必要な場合は、コピーしたCSSを編集し、カンマ区切りで値を追加してください。

プレビューは固定サイズのボックスを使います。実際の要素の寸法、角丸、背景、祖先要素のoverflowのルールによって見え方が変わることがあります。影はレイアウト上のスペースを確保しないため、効果が枠の外に広がる場合は、最終的なコンポーネントの周りに十分な余白を取ってください。