BOX-SHADOW GENERATOR

CSS box-shadow ジェネレーター

CSSのbox-shadowをリアルタイムプレビューしながら作成できるツールです。X軸・Y軸・ぼかし・広がり・色・不透明度をスライダーで調整でき、複数の影を重ねることも可能です。生成したCSSはワンクリックでコピーできます。

影の設定

影は複数枚重ねられます。①が最前面、以降のレイヤーは順に奥へ重なっていきます。

プレビュー

背景色

生成されたCSS

box-shadow: ;

プリセット

クリックすると編集画面に読み込まれます

ソフトカード
レイヤード・ソフト
ニューモーフィズム
プレスド(凹み)
ロングシャドウ
ハードエッジ
ネオングロー
ウォームグロー
カラードシャドウ
グラスモーフィズム
フローティング・ディープ