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

ライブスライダーでオフセット、ぼかし、広がり、色、不透明度を調整し、明るい背景や暗い背景で結果をプレビューして、すっきりした box-shadow の CSS をコピーするだけ。すべての操作はブラウザ内で完結します。

プレビュー

影

水平オフセット

垂直オフセット

ぼかし

広がり

色

#0a0a0a

不透明度

CSS

box-shadow: 0px 10px 25px 0px rgba(10, 10, 10, 0.2);

CSS ボックスシャドウジェネレーターの使い方

1
オフセットを設定する
水平・垂直オフセットのスライダーで、影を左右・上下に動かします。垂直の値がプラスなら影は要素の下に落ち、マイナスなら上に持ち上がります。
2
影を整える
ぼかしを大きくすると縁がやわらかく拡散し、小さくすると輪郭のはっきりした影になります。広がりは、ぼかしが適用される前の影の大きさを拡大・縮小します。
3
色と不透明度を選ぶ
スウォッチをクリックして影の色を選び、不透明度を設定します。明るい背景では、不透明度を抑えたやわらかく暗い影が最も自然に見えます。

4
CSS をコピーする
内側の影が必要なら inset を切り替え、明るい背景や暗い背景でプレビューしてから、box-shadow の一行をスタイルシートにコピーします。

CSS のボックスシャドウはどうやって作りますか?

スライダーで水平・垂直オフセット、ぼかし、広がりを設定し、色と不透明度を選ぶと、下に box-shadow の CSS がリアルタイムで生成されます。それをコピーして、好きな要素に貼り付けるだけです。

box-shadow の各値は何を意味しますか?

値は順に、水平オフセット、垂直オフセット、ぼかし半径、広がり半径で、その後に色が続きます。オフセットは影を動かし、ぼかしは縁をやわらげ、広がりはぼかされる前の影の大きさを変えます。

inset シャドウとは何ですか?

inset シャドウは、要素の後ろではなく内側に描かれる影で、表面がへこんで見えるような印象を与えます。外側と内側（inset）を切り替えることで、外側の影と内側の影を行き来できます。

やわらかく自然な影を作るには?

垂直オフセットは小さめ、ぼかしはたっぷり、広がりはわずかにマイナスにし、暗い色を10〜25パーセントほどの低い不透明度で使います。濃く完全に不透明な影は、不自然に見えがちです。

入力したデータはサーバーにアップロードされますか?

いいえ。このジェネレーターはすべてブラウザ内で実行されます。内容がアップロード・記録・保存されることはないため、作業内容は完全にプライベートに保たれ、オフラインでもツールは動作し続けます。