自由自在にBox-Shadowをカスタマイズ、CSS出力できるWebサービス 『CSS Box Shadows Generator』

自由自在にBox-Shadowをカスタマイズして
CSS出力できるWebサービス。
プレビューで確認しながら細かく調整、
複数のBox-Shadowを重ねる事も可能です。

リンク先

CSS Box Shadows Generator リンク先はこちらから

使い方

画面左上がプレビューウィンドウ、右側がツール部分、画面下部がCSSコード出力となっています。
右側のツール部分で調整していきますが、Box ShadowsとForegroundと分かれています。
Foregroundでは背景の配色や、影をつけたいオブジェクトの形状や配色を変更できます。
Box Shadowsで実際に影を生成していきます。標準では4つの影が用意されています。
レイヤーみたいにいくつも重ねて作る事ができます。

それぞれのレイヤーにはOutset、Insetと外向き、内向きと切り替えれます。
あとはoffsetやblur、Spreadなどで調整していきます。

分かりやすく背景を白にしてみました。実際に使用する環境に合わせて背景などを先に
作っておくと分かりやすくて便利です。

レイヤーは削除したり追加も可能です。まずは1つにして作り始めました。

CSSコードがリアルタイムに出力されているので気に入ったBox-Shadowが出来たら
そのままコピペして使用可能です。

複数のレイヤーを重ねて見ました。コードだけでは作りにくいBox-Shadowを
手軽にプレビューしながら生成できる便利なWebサービスです。