CSS box-shadow 生成
ドラッグする画面ではなく、宣言を。
例を読み込むと入力と設定が一時的に変わります。元の内容に戻せます。
0文字
- 影の数
- 1
出力
box-shadow: 0px 4px 12px rgba(0,0,0,.15);
ファイルは端末の外に出ません
このツールはすべてブラウザ内で動作します。貼り付けた内容は端末内で処理され、サーバーには送信されないため、トークンや鍵、未公開の文章でも安心して使えます。
使用例
計算・変換例 — CSS box-shadow 生成
入力行を順番に入力し、以下の設定を使います。結果を出力行と比較してください。
| 項目 | 値 |
|---|---|
| 入力 1 | 0 4 12 #000000 |
| プロパティ | box-shadow |
| 内側に | オフ |
| 出力 1 | box-shadow: 0px 4px 12px #000000; |
影の横方向のずれは 0、下方向は 4px、ぼかしは 12px です。色は不透明な黒です。
使い方
- 影1つならスライダーで、複数なら1行に1つずつ書きます。
- 1行は「x y ぼかし 広がり 色」です。数値を省くと0になります。
- 文字の影ならtext-shadowに切り替えます。
- 宣言をコピーします。
よくある質問
- 影を複数重ねるのはなぜですか？
- 1つだけだとまず「それらしく」見えないからです。現実の影は、縁の近くの濃い影と、広く薄い影の合成です。ぼかしと不透明度の違う影を2〜3枚重ねると、枠線で囲まれたのではなく浮いているように見えます。1行に1つずつ書けば1つの宣言にまとまります。
- spread（広がり）は何ですか？
- ぼかす前に影を膨らませたり縮めたりします。負の値にすると内側に寄るので、横にはみ出さず下にだけ出る影が作れます。
- text-shadowでspreadが効かないのですが。
- text-shadowにspreadは存在しないからです。使えるのはx・y・ぼかし・色だけで、4つ目の長さがあるとブラウザは宣言全体を捨て、影はまったく表示されません。このページは4つ目の数値をCSSから外し、その旨を下に注記します。
- insetとは？
- 影を箱の内側に描きます。へこんで見せるときに使います。box-shadowにだけあります。
- サーバーに送信されますか？
- いいえ。ブラウザの中だけで動くので、入力した内容はお使いのパソコンから出ません。