Box Shadowジェネレーター

リアルで美しいドロップシャドウを作成

Box
CSS Code

影の設定

10px
10px
20px
0px
30%

プレビュー環境

Box Color
Bg Color

Box Shadowジェネレーターの使い方

要素に影を落とすCSS(box-shadow)を生成します。

1

影の位置と質の調整

スライダーで影の水平・垂直位置、ぼかし具合(Blur)、広がり(Spread)を調整します。

2

色の調整

影の色と透明度を設定します。背景色やボック自体の色も変更して確認できます。

3

内側/外側の切り替え

「Inset」スイッチで、影をボックスの内側に落とす表現も可能です。

関連ツール