CSS Box Shadow Generator

CSS Box Shadow Generatorのしくみ

CSS Box Shadow Generatorは、プロパティ構文を暗記せずにbox-shadow値を設計するためのビジュアルインターフェースを提供します。水平オフセット、垂直オフセット、ぼかし半径、広がり半径、色のスライダーをドラッグすると、ライブプレビューが即座に更新されます。完成したCSS宣言（必要に応じてベンダープレフィックスも含む）をコピーして、スタイルシートやデザインシステムトークンに直接使用できます。

CSSのbox-shadowの完全な構文は次のとおりです：box-shadow: [inset] h-offset v-offset blur spread color。正の水平オフセットは右に影を、負は左に影を落とします。正の垂直オフセットは下方向に、負は上方向に影を落とします。ぼかし半径は柔らかさを作り出します — 0はハードエッジです。広がり半径は要素の寸法を超えて影を拡大または縮小します。オプションのinsetキーワードは影を要素のボーダー内側に移動させ、凹んだり押されたりした効果を作り出します。

GoogleのMaterial Designシステムはレイヤード化されたbox-shadowを使ってエレベーションレベルを定義しています。エレベーション1dpは非常に微妙なシャドウを使用し、エレベーション24dp（ダイアログ用）は強い多層シャドウを使用します。ジェネレーターにはMaterial Designのエレベーションプリセットが含まれているため、標準シャドウ値を正確に合わせることができます — ゼロからシャドウ値を考え出すのではなく、Materialガイドラインに従うデザインシステムで視覚的な一貫性を維持するために重要です。

ニューモーフィズム（ソフトUI）は、一致した背景色に対して2つのbox-shadow — 1つは明るい（左上、白、低透明度）、もう1つは暗い（右下、黒、低透明度）— を使用してエンボスまたはデボスの表面を作り出します。CSSのbox-shadowプロパティはカンマで区切られた複数のシャドウ値を受け付け、すべてが同時に適用されます。ジェネレーターは最大4つの同時シャドウレイヤーをサポートし、1つのプロパティ値でニューモーフィック効果、カラードグローボーダー、複雑なエレベーションスタッキングを実現できます。

CSSのbox-shadowは、要素が独自のコンポジティングレイヤー上にある場合（transform、opacity、またはwill-changeによってトリガーされる）、現代のブラウザでGPUコンポジット処理されます。しかし、頻繁に変化する要素（例：トランジションなしのホバー時）やスクロールコンテナ内の要素にbox-shadowを追加すると、レイアウトとペイントがトリガーされ、パフォーマンスが低下する可能性があります。スムーズなアニメーションシャドウのためには、代わりに疑似要素シャドウのopacityをアニメーションさせてください。ジェネレーターの出力は、transition: box-shadowを安全に追加できる箇所を示します。