CSS ボックスシャドウ生成
スライダーで CSS の box-shadow を調整し、プリセットとプレビュー付きでコードをコピーできます。
100% プライベート——すべてブラウザ内で動作
使い方
- 1
スライダーでオフセット・ぼかし・広がり・色・不透明度を調整します。
- 2
プリセットを使うか、既存の box-shadow を貼り付けて編集します。
- 3
生成された CSS をコピーしてスタイルシートに貼り付けます。
使用例
カードの影
入力
0 8px 24px -4px rgba(15,23,42,.18)出力
box-shadow: 0 8px 24px -4px rgba(15,23,42,.18);ネオンの発光
入力
0 0 24px 2px rgba(99,102,241,.45)出力
box-shadow: 0 0 24px 2px rgba(99,102,241,.45);よくある質問
spread は何をする？
ぼかす前に影を全方向へ広げるか縮めます。負の値で引き締まった影になります。
内側シャドウはなぜ違って見える？
要素の内側に描かれるため、へこんだ印象になります。
Tailwind でも使えますか？
はい。コピーした値を shadow-[…] などの任意プロパティに貼り付けます。
関連ツール
角丸ジェネレーター4 つの角を個別に設定・連動させ、CSS の border-radius をコピーできます。グラデーション生成ツールCSS の線形・放射状グラデーションを視覚的に作成し、CSS コードをコピー。CSS カラー生成ツールベースカラーから10段階のカラースケールを生成し、CSS 変数として出力。JSON 整形ブラウザで JSON を即座に整形・美化・圧縮・検証。JSON 検証ブラウザー上で JSON を即時に検証し、構文エラーの行・列・位置を正確に特定します。Base64 エンコード/デコードテキストと Base64 をブラウザー上で即時に相互変換。Unicode・絵文字に完全対応。