Developer Design Utility
Box Shadow生成ツール
カード、ボタン、モーダル、バナー向けのCSS box-shadow値をリアルタイムで調整し、SaaSスタイルの自然なシャドウコードやinline style例を生成できます。
Shadow設定
影の位置、ぼかし、拡散、色、透明度を調整して好みの立体感を作成できます。
黒系は自然なカードシャドウに、カラー系はGlow効果に適しています。
Outerは外側の影、Insetは内側の影を作成します。
設定した影の効果がリアルタイムで反映されます。
おすすめプリセット
カード、バナー、ボタン、Glow効果によく使われるシャドウ設定をすばやく適用できます。
基本カードシャドウ
Glow / 強調効果
特殊シャドウ
生成結果
以下のコードをCSSファイル、コンポーネントスタイル、inline styleで使用できます。
設定を選択してからCSSコード生成ボタンを押してください。
ヘルプ
Box Shadow生成ツールはいつ使いますか？
カード、ボタン、モーダル、ドロップダウン、画像ボックスなどに浮き上がった印象を与えたいときに使用します。SaaSスタイルのUIでは、控えめな影によって自然な奥行きを表現できます。
box-shadow値の順序
box-shadowは通常、X Offset、Y Offset、Blur、Spread、Colorの順で記述します。
- X Offset: 影の左右移動距離
- Y Offset: 影の上下移動距離
- Blur: 影のぼかし具合
- Spread: 影の広がりを調整する値
- Color: 影の色と透明度
推奨値
- 一般カード: Y 8px〜18px、Blur 24px〜48px、Opacity 10%〜18%
- 大きなSaaSカード: Y 16px〜24px、Blur 40px〜64px、Opacity 14%〜22%
- ボタンホバー: Y 4px〜8px、Blur 10px〜20px、Opacity 12%〜20%
- Glow効果: カラーシャドウ + Blur 36px以上
Outer ShadowとInset Shadowの違い
Outer Shadowは要素の外側に影を作り、カードが浮いているように見せます。Inset Shadowは内側に影を作り、押し込まれたパネルや入力欄のような印象を与えます。
自然なカードシャドウを作るには？
黒やネイビー系の色を使い、Opacityを10%〜20%程度に抑えるのがおすすめです。Blurを大きくし、Spreadを0またはマイナスにすると柔らかい影になります。
Glow効果はどう作りますか？
青や紫などのアクセントカラーを選び、Blurを36px以上にすると発光したようなGlow効果を作れます。
影が強すぎる場合は？
Opacityを下げるかBlurを大きくすると柔らかくなります。一般的なUIでは強い影よりも自然な影の方が安定して見えます。