CSS box-shadow 生成
ドラッグする画面ではなく、宣言を。
- 影の数
- 1
出力
box-shadow: 0px 4px 12px rgba(0,0,0,.15);
ファイルは端末の外に出ません
このツールはすべてブラウザ内で動作します。貼り付けた内容は端末内で処理され、サーバーには送信されないため、トークンや鍵、未公開の文章でも安心して使えます。
使い方
- 影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つ目の数値を書いたときは、ブラウザのように黙って捨てるのではなく、そう表示します。
- insetとは？
- 影を箱の内側に描きます。へこんで見せるときに使います。box-shadowにだけあります。
- サーバーに送信されますか？
- いいえ。ブラウザの中だけで動くので、入力した内容はお使いのパソコンから出ません。