CSS BoxShadow Generatorは、box-shadowのスタイルを生成できるジェネレーターです。

各種値を入力していくだけで、box-shadowのコードをリアルタイムに生成してくれます。

CSS BoxShadow Generatorの使い方

CSS BoxShadow Generatorにアクセスして、各項目の値を入力していきます。入力した値は入力欄のボックスに即時反映されるので、プレビューとして確認できます。

ちなみに、「BODY 背景色」と「BOX 背景色」はプレビューの確認用なので、生成されるCSSには影響しません。

以下のようなCSSが生成されますので、コピーして利用しましょう。

box-shadow: 0 0 10px 0 rgba(100,100,100,1);
border: #000000 1px solid;

あとがき

慣れてしまえばジェネレーターは必要ないかもしれませんが、数値を変えるとどういう表示になるのかをすぐに確認できるので、初学者の方には良いですね。

ジェネレーターの詳しい解説は、BlackFlagさんの記事をご参照ください。BlackFlagの矢次さんが制作者です。