CSSマルチレイヤーbox-shadow（多重影）生成ツール
ローカル処理複数の影レイヤーを滑らかに重ね合わせ、自然でリッチな立体感を演出する高品質なCSS box-shadowコードを生成します。
使い方と処理基準
複数の影レイヤーを滑らかに重ね合わせ、自然でリッチな立体感を演出する高品質なCSS box-shadowコードを生成します。
ツールの処理はブラウザ内で行われます。計算・変換の共有リンクを作成すると値がURLに含まれます。アカウント・アクセス解析・広告の情報はプライバシーポリシーをご確認ください。
処理制限
- 最大入力文字数: 100,000文字
1枚の影より自然な立体感を出す多層の影を作ります。重なりごとに距離・ぼかしは増え、透明度は下がってなめらかに広がります。
できること
- 重なりの数
- 重なりを増やすほど影がやわらかくなります。
- 色の指定
- R, G, BまたはHEXで影の色を決めます。
CSSマルチレイヤーbox-shadow（多重影）生成ツールの使い方
- 1重なり・広がりを決める重なりの数と基本の距離（px）を決めます。
- 2色を決める「0, 0, 0」のようにRGBを書きます。
- 3CSSをコピーカード・ボタンのスタイルに貼ります。
活用例
3重、4px
入力: 3重、4px、0, 0, 0
結果: box-shadow:
0 4px 8px rgba(0, 0, 0, 0.16),
0 8px 16px rgba(0, 0, 0, 0.08),
0 12px 24px rgba(0, 0, 0, 0.05);
主な利用シーン
- カード・モーダルに自然な立体感を出すとき
- デザインシステムのelevationの段階を作るとき
よくある質問 (FAQ)
色の欄に#000のようなHEXを入れてもいいですか？
使えます。#000・#336699のようなHEXはRGBに変換し、「0, 0, 0」のようにR, G, Bを書いても構いません。それ以外の値（redなど）は誤ったCSSにならないようエラーとして示します。