自由自在にBox-Shadowをカスタマイズして
CSS出力できるWebサービス。
プレビューで確認しながら細かく調整、
複数のBox-Shadowを重ねる事も可能です。
![自由自在にBox-Shadowをカスタマイズ、CSS出力できるWebサービス 『CSS Box Shadows Generator』](https://pc.mogeringo.com/wp-content/uploads/2023/06/cssboxshadows-thumb.jpg)
目次
リンク先
CSS Box Shadows Generator リンク先はこちらから
使い方
![自由自在にBox-Shadowをカスタマイズ、CSS出力できるWebサービス 『CSS Box Shadows Generator』](https://pc.mogeringo.com/wp-content/uploads/2023/06/cssboxshadows1.jpg)
画面左上がプレビューウィンドウ、右側がツール部分、画面下部がCSSコード出力となっています。
右側のツール部分で調整していきますが、Box ShadowsとForegroundと分かれています。
Foregroundでは背景の配色や、影をつけたいオブジェクトの形状や配色を変更できます。
Box Shadowsで実際に影を生成していきます。標準では4つの影が用意されています。
レイヤーみたいにいくつも重ねて作る事ができます。
![自由自在にBox-Shadowをカスタマイズ、CSS出力できるWebサービス 『CSS Box Shadows Generator』](https://pc.mogeringo.com/wp-content/uploads/2023/06/cssboxshadows2.jpg)
それぞれのレイヤーにはOutset、Insetと外向き、内向きと切り替えれます。
あとはoffsetやblur、Spreadなどで調整していきます。
![自由自在にBox-Shadowをカスタマイズ、CSS出力できるWebサービス 『CSS Box Shadows Generator』](https://pc.mogeringo.com/wp-content/uploads/2023/06/cssboxshadows3.jpg)
分かりやすく背景を白にしてみました。実際に使用する環境に合わせて背景などを先に
作っておくと分かりやすくて便利です。
![自由自在にBox-Shadowをカスタマイズ、CSS出力できるWebサービス 『CSS Box Shadows Generator』](https://pc.mogeringo.com/wp-content/uploads/2023/06/cssboxshadows4.jpg)
レイヤーは削除したり追加も可能です。まずは1つにして作り始めました。
![自由自在にBox-Shadowをカスタマイズ、CSS出力できるWebサービス 『CSS Box Shadows Generator』](https://pc.mogeringo.com/wp-content/uploads/2023/06/cssboxshadows5.jpg)
CSSコードがリアルタイムに出力されているので気に入ったBox-Shadowが出来たら
そのままコピペして使用可能です。
![自由自在にBox-Shadowをカスタマイズ、CSS出力できるWebサービス 『CSS Box Shadows Generator』](https://pc.mogeringo.com/wp-content/uploads/2023/06/cssboxshadows6.jpg)
複数のレイヤーを重ねて見ました。コードだけでは作りにくいBox-Shadowを
手軽にプレビューしながら生成できる便利なWebサービスです。
コメント