CSS Box Shadow ジェネレーター無料・登録不要
CSS box-shadow をビジュアルで作成。Card・Button・Neumorphism（凸/凹）・Glow など 6 プリセット + 複数レイヤー重ねがけ + リアルタイムプレビュー + CSS コピー。
プリセット
プレビュー
シャドウレイヤー（1）
CSS コピー
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
- inset: 内側影（凹み表現） / 外側影（凸表現）
- X: 水平方向のオフセット（+ で右、- で左）
- Y: 垂直方向のオフセット（+ で下、- で上）
- blur: ぼかし半径（大きいほど柔らかい）
- spread: 影の拡張（+ で大きく、- で小さく）
- 複数レイヤー: 「+ レイヤー追加」で重ねがけ可能。Neumorphism は凸 / 凹で 2 層使う
- 関連: カラーコード変換 / CSS グラデーション
CSS Box Shadow ジェネレーターの使い方
- 1テキストを入力またはペーストします
- 2「変換する」ボタンをクリックします
- 3結果を確認してコピーします
よくある質問
CSS Box Shadow ジェネレーターは無料ですか？
はい、完全無料でご利用いただけます。会員登録も不要です。
スマートフォンでも使えますか？
はい、スマートフォン・タブレット・PCなど、ブラウザがあればどのデバイスでもご利用いただけます。
対応している画像形式は？
PNG、JPG、WebP、GIF、SVG形式に対応しています。
関連ツール
CSS Box Shadow ジェネレーターについて
CSS Box Shadow ジェネレーターが解決する課題
Web デザイナー / フロントエンドエンジニアが「いい感じの影」を CSS で書く時、毎回数値調整に時間を取られます。本ツールは X / Y / blur / spread / color / opacity をビジュアル UI で調整 + リアルタイムプレビュー + ワンクリック CSS コピーで、影づくりを数十秒で完了させます。
6 プリセット
【Card（標準）】y=2 / blur=8 / 10% 黒 → 一般的なカードシャドウ。 【Card（強め）】y=10 / blur=25 / spread=-5 → 浮き上がる印象。 【Button hover】y=4 / blur=12 / 20% 黒 → ホバー時の浮き感。 【Neumorphism（凸）】凸感は明 + 暗 2 層シャドウ → グレー系 UI で流行のスタイル。 【Neumorphism（凹）】凹感は inset で明 + 暗 2 層。 【Glow（青）】blur 大 + spread + 半透明色 → 光る効果。色変更可。
こんなシーンで使えます
【1. Tailwind CSS / Vanilla CSS のカード設計】shadow-md だと物足りない時の カスタムシャドウ作成。
【2. Neumorphism UI 実装】凸 / 凹デザインは光源方向 + 明暗 2 層が必須。本ツールのプリセットでベース作成 → 微調整。
【3. ボタン hover / focus 状態】通常状態 + hover 状態の 2 つを別々に作成して transition で繋ぐ。
【4. デザインシステム整備】Card lv1 / Card lv2 / Card lv3 のシャドウバリエーションをトークン化。
よくある失敗と注意点
1つ目: blur が大きすぎ → ぼやけ過ぎて影として認識されない。blur 4-25px が標準範囲。
2つ目: opacity 1.0 → 真っ黒で重い印象。0.1-0.25 が標準（夜間モードは 0.3-0.5）。
3つ目: 多重シャドウのパフォーマンス → 4 層以上はモバイル端末で描画コスト大。3 層までが推奨。
4つ目: 影の色を黒以外に → 背景色と統一感を出すため、影色は「背景の暗い系統色（紺・濃グレー）」を使うと自然。
5つ目: inset の方向 → inset は影が「物体の内側」に入る。x=-5 y=-5 だと光源が左上、x=5 y=5 だと光源が右下。