ライブプレビュー機能を使って、CSSのボックスシャドウを視覚的に作成できます。オフセット、ぼかし、広がり、色、および複数のレイヤーを調整できます。すぐに使えるCSSコードを即座にコピーできます。
box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.25);CSSの`box-shadow`プロパティは、要素の枠の周囲に影の効果を追加します。影は、水平方向のオフセット、垂直方向のオフセット、ぼかし半径、広がり半径、色、およびオプションのインセットフラグによって定義されます。コンマで区切った複数の影を積み重ねることで、重ね合わせ効果を作成することができ、このプロパティはベンダープレフィックスなしで、すべての最新ブラウザでサポートされています。
スライダーとカラーピッカーを調整して、各シャドウレイヤーを設定します。値を変更すると、プレビューボックスがリアルタイムで更新されます。複数のシャドウレイヤーを個別に追加・削除することができます。設定が完了したら、「コピー」をクリックして、スタイルシートに貼り付ける準備が整った完全なボックスシャドウのCSS値を取得してください。
プリセットを、一般的なパターンの出発点として活用してください。UIコンポーネントには「カードシャドウ」、モーダルウィンドウには「浮き出たような影」、微妙な奥行きを表現するには「ソフトシャドウ」、フラットデザイン風の外観には「ハードシャドウ」が適しています。「インセット」オプションを使用すると、ボタンが押された状態やインセット形式の入力フィールドに役立つ内側の影を作成できます。