CSS ボックスシャドウ生成器

複数レイヤーの CSS box-shadow をライブプレビュー、inset 切替、精密コントロールで作成。

レイヤー1
複数レイヤーの CSS box-shadow をライブプレビュー、inset 切替、精密コントロールで作成。
レイヤー設定
レイヤー 1
px
px
px
px
プレビュー
box-shadow の値を CSS にコピーします。
box-shadow
CSS 出力
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.2);

box-shadow とは?

複数レイヤーの CSS box-shadow をライブプレビュー、inset 切替、精密コントロールで作成。

box-shadow は、要素の外側(または内側)に 1 つ以上の影を描く CSS プロパティです。

各影は水平/垂直オフセット、ぼかし半径、任意の拡がり、アルファ付きの色で構成され、inset を付けると内側の影になります。

複数レイヤーはカンマ区切りで、影を重ねて奥行き、発光、くっきりした縁などを作れます。

  • 小さなオフセットと大きめのぼかしで柔らかな浮遊感。
  • 高い不透明度と小さめのぼかしでシャープな縁。
  • 外側と内側の影を組み合わせて奥行きを追加。
  • パフォーマンスのためレイヤー数は控えめに。