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コード生成ボタンを押してください。
ヘルプ
Box Shadow生成ツールはいつ使いますか？
カード、ボタン、モーダル、ドロップダウン、画像ボックスなどに浮き上がった印象を与えたいときに使用します。SaaSスタイルのUIでは、控えめな影によって自然な奥行きを表現できます。
使い方
- Offset、Blur、Spread、色、透明度、Shadow Typeを調整します。
- Preview Cardで影の奥行きとカードの角丸をリアルタイムで確認します。
- おすすめプリセットを適用し、カード、ボタン、Glow、Insetの影をすばやく比較します。
- CSSコードを生成し、結果をコピーするかCSSファイルとして保存します。
自然なカードシャドウを作るには？
黒やネイビー系の色を使い、Opacityを10%〜20%程度に抑えるのがおすすめです。Blurを大きくし、Spreadを0またはマイナスにすると柔らかい影になります。
Glow効果はどう作りますか？
青や紫などのアクセントカラーを選び、Blurを36px以上にすると発光したようなGlow効果を作れます。
影が強すぎる場合は？
Opacityを下げるかBlurを大きくすると柔らかくなります。一般的なUIでは強い影よりも自然な影の方が安定して見えます。