CSS box-shadow生成CSS Box Shadow Generator
スライダーで直感的にbox-shadowを生成。プレビューを見ながら調整してCSSをコピー。Generate box-shadow visually with sliders. Adjust with live preview and copy the CSS.
お気に入りについて About favorites
この端末のブラウザにのみ保存され、サーバーには送信されません。 Saved on this device only—never sent to our servers.
使い方・ユースケース How to Use & Use Cases
スライダーでX/Y方向・ぼかし半径・広がり・不透明度を調整し、必要ならinset（内側の影）を有効にします。プレビューを見ながらCSSを生成し、コピーボタンでスタイルシートに貼り付けられます。 Adjust X/Y offset, blur, spread, and opacity with sliders, toggle inset for inner shadows, preview the result, and copy the CSS into your stylesheet.
カードUIやボタンの立体感を出したいとき、モーダルやドロップダウンの浮き上がり表現を試したいとき、デザインカンプの影をCSSコードに素早く落とし込みたいときなど、Web制作で使えます。 Use it for card and button depth, floating modals and dropdowns, or quickly turning mockup shadows into CSS during web development.
よくある質問FAQ
各スライダーの意味を教えてくださいWhat does each slider do?
「X方向」は影を左右にずらす距離です（正の値で右、負の値で左）。「Y方向」は上下のずれです（正の値で下）。「ぼかし半径」は影のぼかし具合で、0にすると輪郭がくっきりになります。「広がり」は影全体のサイズを拡大・縮小します（正の値で大きく、負の値で小さく）。「不透明度」は影の濃さです。X Offset shifts the shadow left or right. Y Offset shifts it up or down. Blur Radius controls softness (0 = sharp). Spread expands or contracts the shadow size. Opacity controls how dark the shadow is.
複数の影を重ねることはできますか？Can I layer multiple shadows?
このツールでは1つの影を生成します。複数重ねたい場合は、影を2つ以上カンマ区切りで並べてください。例：box-shadow: 2px 2px 4px rgba(0,0,0,0.2), -2px -2px 4px rgba(255,255,255,0.8);This tool generates one shadow. To layer multiple shadows, copy the CSS and add more shadows separated by commas.
inset（内側の影）には対応していますか？Is inner shadow (inset) supported?
はい。「内側の影（inset）」チェックボックスで切り替えられます。insetにするとボタンが押し込まれたような表現や、テキストフィールドのくぼんだ見た目に使えます。Yes. Toggle the Inner shadow (inset) checkbox to switch.
生成したCSSはそのまま使えますか？Can the generated CSS be used as-is?
はい。コピーボタンでクリップボードにコピーして、そのままCSSファイルに貼り付けてご利用いただけます。すべてのモダンブラウザ（Chrome・Firefox・Safari・Edge）で動作します。Yes. Click Copy and paste it directly into your CSS file. Works in all modern browsers.
ニューモーフィズムのような立体的な影を作れますか？Can I create a neumorphism effect?
作れます。同じ要素に明るい影と暗い影を重ねることでニューモーフィズム風の表現が可能です。本ツールで1つ目の影を生成してコピーし、手動でカンマ区切りで2つ目の影を追記してください。Yes. Combine a light shadow and a dark shadow on the same element using comma-separated values in the CSS.
ページを閉じれば、端末内のデータは自動的に消去されます。契約書や顧客資料など、慎重に扱うデータも安心してご利用ください。When you close the page, data on your device is cleared automatically. Safe for sensitive files such as contracts and client documents.
