テキスト・開発端末内で処理・アップロードなし
🔒ブラウザ内処理・アップロード不要
CSSボックスシャドウジェネレーター
CSSのbox-shadowをプレビューしながら作成。複数レイヤー、CSS読み込み、コピーに対応。
影を見ながらbox-shadowを作る
最大6レイヤーの位置・ぼかし・色を調整し、そのまま使えるCSSをコピーできます。
1. 仕上がりを確認
背景を切り替えると、明るい面と模様のある面で影の見え方を確認できます。
2. 影を調整
レイヤーは一覧の先頭から手前に重なります。
レイヤー 1/6
プリセットから始める
近い影を選んでから、数値と色を微調整できます。
既存のCSSを読み込む
HEX・rgb()・rgba()とpx値に対応。複数レイヤーも括弧内のカンマを保ったまま解析します。
3. CSSをコピー
box-shadowプロパティとして、そのままスタイルシートへ貼り付けられます。
box-shadow: 0px 6px 16px -3px rgba(0, 0, 0, 0.2);このツールは誰向け？
Webデザイナー、フロントエンドエンジニア、UIデザイナー
使用場面
- 1ボタンやカードに立体感を出したい時
- 2カードやモーダルの影を調整したい時
- 3内側影や複数レイヤーを試したい時
- 4CSSコードをコピペで使いたい時
よくある質問
CSS box-shadowとは何ですか？
CSSのbox-shadowプロパティは、要素に影を追加するためのスタイルです。X/Yオフセット、ぼかし半径、拡散半径、色を指定して、奥行き感や立体感を演出できます。
複数のシャドウを重ねられますか？
はい、カンマ区切りで複数のシャドウを重ねることができます。手前に表示したいシャドウを先に書き、後ろに行くほど奥に配置されます。
既存のbox-shadowを読み込めますか？
はい。HEX・rgb()・rgba()の色とpx値を使ったCSSを読み込めます。複数レイヤーのrgba()内にあるカンマも正しく区別します。
データはサーバーに送信されますか？
いいえ。すべての処理はブラウザ内で完結します。生成したCSSや設定がサーバーに送信されることはありません。
生成したCSSコードはどのブラウザに対応していますか？
標準のbox-shadowプロパティを生成します。実際の対応範囲は対象ブラウザやWebViewの要件に合わせ、公開前に実機で確認してください。