CSS box-shadow 生成

使い方

1. カードにはすでにソフトな影が付いています。X/Y オフセット、ぼかし、広がりのスライダーを動かすか、色と不透明度を選ぶか、内側の影にする場合はインセットにチェックを入れます。すべてライブで更新され、押すボタンはありません。
2. プリセットのチップ（ソフトフロート、ストロングリフト、インセット、ネオングロー、ダブル、ニューモーフィズム）をクリックすると、すぐに使える見た目が読み込まれます。
3. 「+」でレイヤーを追加して影を重ねられます。各レイヤーは個別に編集できます。box-shadow 宣言全体をワンクリックでコピーできます。

範囲、制限、よくある質問

• box-shadow のみです。drop-shadow() フィルター、text-shadow、CSS のグラデーション影は対象外です。
• 色はピッカーと不透明度スライダーから決まります。貼り付けた CSS の色文字列は解析しないため、入力ミスや誤読が起きる余地がありません。
• ニューモーフィズムは明るい面に依存します。非常に暗い背景では効果が見えない場合があります。これはスタイルの性質であり、不具合ではありません。
• 何も保存されず、リンクのパラメーターで共有されることもありません。再読み込みすると既定のソフトフロートに戻ります。すべてブラウザ内で実行されます。