CSSボックスシャドウジェネレーター

CSSボックスシャドウジェネレーター

ライブプレビューで美しいボックスシャドウを視覚的にデザインします。複数のシャドウレイヤーを追加し、オフセット、ぼかし、拡張、色を調整してからCSSをコピーします。手動コーディングは不要です。

使い方

水平および垂直オフセット、ぼかし半径、拡張、不透明度のスライダーを調整します。インセットを切り替えて内側の影を作成します。最大10個のシャドウレイヤーを追加して複雑な効果を作成します。プリセットギャラリーを使用して、ノイ ズーモルフィズム、グロー効果、またはエレベートされたカードなどのクイック開始ポイントを使用します。準備ができたら、生成されたCSSをコピーします。

特徴

• ライブプレビュー – パラメータを調整しながら、サンプルボックスに適用された影をリアルタイムで確認できます
• 複数レイヤー – 最大10個のシャドウレイヤーをスタックして、複雑でリアルな効果を作成できます
• インセットシャドウ – 各レイヤーで外側と内側（インセット）の影を切り替えます
• 色と不透明度 – 各シャドウレイヤーの不透明度コントロールを備えたフルカラーピッカー
• プリセットギャラリー – ソフトシャドウ、ハードシャドウ、ノイ ズーモルフィズム、エレベートされたカード、プレスされたボタン、グロー効果など
• CSSをコピー – 完全なbox-shadow CSSコードのワンクリックコピー