レイヤー
X オフセット4px
Y オフセット4px
ぼかし8px
広がり0px
%
インセット
CSS box-shadow 生成とは？
CSS box-shadow 生成では、box-shadow の値を視覚的に作成し、CSS をすぐにコピーできます。オフセット、ぼかし、広がり、色、不透明度をライブプレビューで調整できます。
box-shadow 生成の使い方
- X/Y オフセット、ぼかし、広がりのスライダーを調整します。
- 影の色を選択し、不透明度を設定します。
- 内側の影効果にはインセットを切り替えます。
- 複雑な影にはレイヤーを追加します。
- CSS をコピーしてプロジェクトに貼り付けます。
詳しく見る▾
ボックスシャドウのパラメータ
- X/Y オフセット —影を水平・垂直方向に移動させます
- ぼかし —影の端のぼかし具合
- 広がり —影のサイズを拡大または縮小します
- インセット —要素の内側に影を描画します
よくある質問
複数の影を追加できますか？
はい。「レイヤーを追加」をクリックすると複数のbox-shadow値を重ねられ、出力CSSではカンマで区切られます。
生成されたCSSはどう使いますか？
「CSSをコピー」をクリックし、box-shadowプロパティをCSSファイルまたはstyleブロックに直接貼り付けてください。