こんな方におすすめ
- カードやボタンを作る方
- 影の引数を学ぶ開発者
Developer Design Utility
Box Shadow生成ツール
カード、ボタン、モーダル、バナー向けのCSS box-shadow値をリアルタイムで調整し、SaaSスタイルの自然なシャドウコードやinline style例を生成できます。
Box Shadow生成
X/Y位置、Blur、Spread、色、透明度を調整してシャドウを作成できます。
ライブプレビュー
シャドウ効果がPreview Cardに即座に反映されます。
CSSコードコピー
生成したbox-shadowコードをコピーしたりCSSファイルとして保存できます。
Shadow Type
Outer
Offset
0px / 18px
Blur / Spread
48px / 0px
Opacity
18%
STEP 1
Shadow設定
影の位置、ぼかし、拡散、色、透明度を調整して好みの立体感を作成できます。
-80px
0px
80px
-80px
18px
80px
0px
48px
120px
-50px
0px
50px
黒系は自然なカードシャドウに、カラー系はGlow効果に適しています。
0%
18%
100%
Outerは外側の影、Insetは内側の影を作成します。
0px
24px
60px
Live Preview
Box Shadow
Preview Card
設定した影の効果がリアルタイムで反映されます。
X / Y
0px / 18px
Blur
48px
Opacity
18%
STEP 2
おすすめプリセット
カード、バナー、ボタン、Glow効果によく使われるシャドウ設定をすばやく適用できます。
基本カードシャドウ
Glow / 強調効果
特殊シャドウ
STEP 3
待機中
生成結果
以下のコードをCSSファイル、コンポーネントスタイル、inline styleで使用できます。
設定を選択してからCSSコード生成ボタンを押してください。
1層の影を調整し、最新のCSSを書き出す
カードやボタンの水平・垂直オフセット、ぼかし、広がり、色、不透明度を設定します。外側の影とinsetを比較し、プレビューの角丸も含むCSSを生成します。
活用場面
- 控えめなカードの影を作る。
- 内側にくぼんだ表現を作る。
入力から結果の確認まで
- 1
X・Yオフセット、ぼかし、広がりを設定します。
- 2
HEX色と不透明度を指定します。
- 3
外側またはinsetを選び、角丸を調整します。
- 4
一度生成すると、その後の変更はコードに反映されます。
- 5
コピー・保存して実際の背景で確認します。
柔らかいカードの影
- 入力
- X 0・Y 8・ぼかし24・広がり-8 #000000・不透明度22%・外側
- 結果
- box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.22);
負の広がりは影の元の領域を小さくし、ぼかしが縁を柔らかくします。
内側のくぼみ
- 入力
- X 0・Y 2・ぼかし6・広がり0 #000000・不透明度20%・inset
- 結果
- box-shadow: inset 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
影がボックスの内側に描画されます。
計算・処理の仕組み
オフセット、ぼかし、広がり、RGBA色を1つのbox-shadowにします。色は#RGB・#RRGGBBに対応し、不透明度はパーセントからalphaへ変換します。.shadow-boxのルールにborder-radiusも含めます。inline HTML例はCSSコメント内に出力します。
注意点と制限
- 1層だけを生成します。複数の影は手動で編集してください。
- ぼかしは0以上ですが、オフセットや広がりには負数を使えます。
- プレビューは固定の環境で、実際のすべてのテーマを再現しません。
- 親要素のoverflowなどで外側の影が切れる場合があります。
データの取り扱い
設定はブラウザー内で処理します。コピー・保存に選んだ値が含まれ、サーバーへ送信しません。
参考資料
あわせて使えるツール
- 角丸生成
角ごとの半径を調整します。
- CSSグラデーション生成
カードの背景を比較します。
よくある質問
プレビューの角丸も出力されますか？
はい。box-shadowとborder-radiusを出力します。角丸を別のスタイルで管理するならその宣言を外してください。
別のページで色が違って見えるのはなぜですか？
半透明の影は背景と合成されます。実際のライト・ダークテーマで確認してください。
無効な色のまま古いCSSをコピーできますか？
できません。無効なHEXは書き出し可能な結果を消します。色を修正してからコピー・保存してください。