Box Shadowジェネレーター

Box Shadowジェネレーターとは？

CSS の box-shadow を視覚的に調整して、影の見た目とコードを確認できるツールです。オフセット、ぼかし、広がり、色、inset を調整しながらリアルタイムでプレビューできます。

カード、ボタン、モーダルなどの影を作りたいときに便利です。

影の位置を左右・上下に動かします。正の値と負の値で影の出る方向が変わります。

影のぼかし具合を調整します。値が大きいほど柔らかい影になります。

影の広がりを調整します。影を大きくしたいときや、締まった影にしたいときに使います。

影の色を変えられます。inset をオンにすると、外側ではなく内側の影になります。

ボックス色と背景色を切り替えられます。これは見た目確認用で、生成されるCSSには含まれません。

たとえば offsetX: 0, offsetY: 8, blur: 16, spread: 0、色を rgba(0, 0, 0, 0.15) にすると、次のようなCSSになります。

box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15);

inset をオンにすると、次のような出力になります。

box-shadow: inset 0px 8px 16px 0px rgba(0, 0, 0, 0.15);