CSS ボックスシャドウ ジェネレーター
CSS box-shadow コードを視覚的に構築: オフセット、ぼかし、広がり、透明度付きカラー、inset モード、最大4層のレイヤーをスライダーで操作し、ライブプレビューで確認できます。
🔒 ブラウザ内で完全に処理されます。ここに入力した内容はアップロードされません。
結果
box-shadow 宣言には6つの可変部分があります — X と Y のオフセット、ぼかし、広がり、色、そしてオプションの inset キーワード — そしてそれらを正しく設定する唯一の方法は、実際に見ることです。このジェネレーターはすべての部分をスライダーに置き、ドラッグに応じて結果をプレビューカードに描画するため、下部のCSS行は常にあなたが見ているものそのものです。
現実の影が単一のレイヤーであることはまれです。レイヤーリストを使用すると、1つの宣言に最大4つのシャドウを重ねられます: エッジの定義のためのタイトな暗いラインと、高さのための幅広でソフトなウォッシュ、またはニューモーフィズムを定義する光と影のペアなどです。レイヤーを選択して編集し、不要なものは削除すれば、結合された box-shadow 値がライブで更新されます。
影はダークインターフェースでは非常に異なって見え、黒い影をほぼ黒いページに置くと単純に消えてしまいます。プレビュー背景切り替えは、両方のテーマを公開前に確認できるよう、ライトとダークの間で背景を切り替えます。プリセットページは、人々が実際に検索するバリエーションをカバーしています: ソフトな高さの影、くぼみのインセット、2層のニューモーフィズムレシピ、そして控えめなカードシャドウです。
このサイトのすべてのツールと同様に、このジェネレーターは無料で、完全にブラウザー内で動作します: アップロード不要、アカウント不要、ページが読み込まれた後はオフラインでも動作し続けます。