CSS 影生成器

ツール概要：CSSボックスシャドウジェネレーター

CSSボックスシャドウジェネレーターは、視覚的な操作で影を作成できるツールです。内側/外側の影、リアルタイムプレビュー、コピー可能なCSSコードに対応しています。

CSSボックスシャドウジェネレーターとは？

オフセット、ぼかし、拡張、色を調整し、box-shadow のCSSコードを自動生成します。

使い方

1. オフセット、ぼかし、拡張を調整します。
2. 色と不透明度を設定します。
3. 内側の影が必要なら inset を有効にします。
4. 生成されたCSSコードをコピーします。

よくある利用シーン

• カードやボタンに立体感を追加
• デザイン仕様を素早くCSS化
• 影の方向や強さの微調整
• UIの軽い浮き上がり表現

❓ FAQ

Q1: 影が濃すぎる/薄すぎる。
A: まずはぼかしと不透明度を調整し、次に拡張を調整してください。

Q2: 影の方向が違う。
A: 正の値は右/下、負の値は左/上に移動します。

Q3: inset はいつ使う？
A: 入力欄など、内側に沈み込む表現に使います。

機能

• リアルタイムプレビュー
• 主要パラメータの調整
• 内側/外側の切り替え
• ワンクリックコピー

パラメータ

• Offset X / Y：水平/垂直の移動量
• Blur：ぼかし量
• Spread：拡張量
• Color：色と不透明度

CSS例

box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.15);

box-shadow: inset 0 2px 6px 0 rgba(0, 0, 0, 0.25);

ヒント

1. カードは大きめのぼかしと低めの不透明度がおすすめ。
2. ホバー時はぼかしを増やしオフセットを減らす。
3. 複数影を組み合わせると奥行きが出ます。