技術リファレンス&アーキテクチャガイド

インタラクティブ CSS ボックスシャドウジェネレーター — リファレンスガイド

ぼかし、広がり、インセット、多層レイヤーのプリセットを備えた視覚的なCSSシャドウ作成ツール。

主要パラメータ&設定項目

水平オフセット (X)number

影の水平方向のズレ幅をピクセル単位で指定します。

初期値: 0
垂直オフセット (Y)number

影の垂直方向のズレ幅をピクセル単位で指定します。

初期値: 8
ぼかし半径 (Blur)number

影の輪郭のぼかし度合いを指定します。

初期値: 24
広がり半径 (Spread)number

影の拡大・縮小サイズを指定します。

初期値: 0

プロの活用テクニック&推奨設定

自然で滑らかなシャドウ効果

単一の濃い影ではなく、薄い影を複数層(マルチレイヤー)重ねることで、自然で高品質な立体感を表現できます。

よくあるトラブルと解決策

ダークモードで影が見えにくい

影の色に純粋な黒ではなく、背景色よりわずかに暗い半透明色(rgba)を指定し、外枠に微細なボーダーを付与してください。

よくある質問 (FAQ)

Tailwind CSS用のクラス名も生成されますか?▼

はい。標準CSS構文に加えて、Tailwind CSSの任意値クラス(shadow-[...])としても直接コピーできます。

関連するおすすめ開発ツール

すべてのツール →