シャドウ生成

使い方

1. セグメント化されたコントロールを使用して、box-shadow と drop-shadow モードの間で選択します。
2. 最初のシャドウ レイヤーの X、Y オフセット、ぼかし、スプレッド、色を調整します。
3. 「+ レイヤー」をクリックして複数のシャドウをスタックし、それぞれを独立して設定します。
4. ライブシャドウプレビューボックスで結合された効果をプレビューします。
5. 出力セクションから生成された CSS 宣言をコピーして、スタイルシートに貼り付けます。

例

• offsetY=4、ぼかし=12、スプレッド=0、色=rgba(0,0,0,0.15) を設定すると、標準的なカードシャドウ box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.15) が生成されます。
• offsetY=1、ぼかし=3、色=rgba(0,0,0,0.08) を使用して 2 番目のレイヤーを追加すると、マテリアルスタイル UI で一般的な層状の深度エフェクトが作成されます。