CSS box-shadowジェネレーター
複数シャドウの重ね合わせ・insetに対応した box-shadow を、プレビューを見ながら無料で作成できます。
シャドウレイヤー
よくある質問
box-shadowの各数値は何を意味しますか？ +
順に「水平位置（正で右）」「垂直位置（正で下）」「ぼかし（大きいほど輪郭がぼやける）」「広がり（正で拡大・負で縮小）」「色」です。insetを付けると要素の内側にシャドウが入ります。
シャドウを複数重ねることはできますか？ +
はい。「＋シャドウを追加」で複数のシャドウレイヤーを重ねられます。カンマ区切りで先に書いたものが手前に表示されます。立体感や多層の光彩表現に使えます。
insetシャドウとは何ですか？ +
insetを付けると、要素の外側ではなく内側にシャドウが描画され、くぼんだような立体表現ができます。入力フィールドやプレスされたボタンの演出でよく使われます。
生成したCSSはそのまま使えますか？ +
はい。「box-shadow」プロパティの値としてコピーし、CSSファイルやstyle属性に貼り付けるだけで利用できます。主要なモダンブラウザはすべて対応しています。
入力した内容はサーバーに送信されますか？ +
いいえ。プレビューやCSSコードの生成はすべてブラウザ内（JavaScript）で完結し、外部に送信されることはありません。
特徴
複数シャドウを自由に重ねられる
レイヤーを追加・削除しながら、多層のドロップシャドウや光彩表現を作成できます。
inset（内側）シャドウ対応
チェック1つで外側・内側のシャドウを切り替え、凹んだ立体表現も作れます。
リアルタイムプレビュー
数値を変更すると同時にプレビューが更新され、仕上がりをすぐに確認できます。
よく使うプリセット
カードの影・ニューモーフィズム・光彩など定番スタイルをワンクリックで適用できます。
使い方
シャドウを調整
位置・ぼかし・広がり・色・不透明度をスライダーやカラーピッカーで設定します。
必要ならレイヤーを追加
複数のシャドウを重ねて、より複雑な影の表現をプレビューで確認します。
CSSをコピー
生成されたコードをコピーし、CSSファイルに貼り付けて使用します。
ユースケース
カード・ボタンの立体感演出
ホバー時の浮き上がりや、押した感じを出したいUIパーツの作成に。
ニューモーフィズムデザイン
insetと通常シャドウを組み合わせた、柔らかい凹凸表現の試作に。
フォーカス・光彩エフェクト
入力欄のフォーカスリングやボタンの光彩効果を素早く試作。
デザインカンプの数値確認
Figma等で決めた影の見た目から、実装用のCSS値を素早く書き出したいときに。
安全性とプライバシー
処理はすべてブラウザ内で完結
設定した数値や色はサーバーに送信されず、その場でプレビュー・生成されます。
入力履歴は残りません
ページを閉じたり再読み込みすると、設定内容は残らず消えます。
アカウント登録不要
会員登録やログインなしで、誰でもすぐに利用できます。
通信はHTTPSで保護
ページ自体の読み込みもHTTPSで暗号化され、安全に利用できます。
同じカテゴリのツール
他のツールもチェックQRコード作成
URL・テキスト・メール・WiFi・連絡先(vCard)からQRコードを無料生成。PNG・SVGでダウンロード可能。
QRコード読み取り（デコーダー）
画像アップロード・ドラッグ＆ドロップ・カメラでQRコードを無料で読み取り、URL・テキストを解析。ブラウザ内処理でサーバー送信なし。
ダミーテキスト生成ツール
Lorem Ipsum（英語）または日本語のダミーテキストを、段落数・文数を指定して無料生成。コピー・HTML出力・ダウンロードに対応。ブラウザ内処理でサーバー送信なし。
Faviconジェネレーター
画像から favicon.ico・各サイズのPNG・Apple Touch Icon・Android用アイコンを無料で一括生成。HTMLタグ付きでZIPダウンロード。ブラウザ内処理でサーバー送信なし。
抽選・順番決め・チーム分けツール
名前やアイテムを1行ずつ入力するだけで、当選者の抽選・順番決め・チーム分けを無料でランダム実行。重複あり/なしの抽選、均等なチーム分けに対応。
CSSグラデーションジェネレーター
複数のカラーストップから線形（linear-gradient）・円形（radial-gradient）のCSSグラデーションをプレビューしながら無料生成。角度・位置の調整、プリセット、コードのコピーに対応。