CSS ボックス シャドウ ジェネレーター
CSS ボックス シャドウ コードを視覚的に構築します。オフセット、ぼかし、スプレッド、不透明度のあるカラー、インセット モード、およびライブ プレビューを備えた最大 4 つのレイヤーのスライダー。
結果
box-shadow 宣言には 6 つの可動部分 (X および Y オフセット、ブラー、スプレッド、カラー、およびオプションの inset キーワード) があり、それらを正しく理解する唯一の方法は、それらを確認することです。このジェネレーターはすべてのパーツをスライダー上に配置し、ドラッグすると結果がプレビュー カードにレンダリングされるため、下部の CSS 行は常に表示されているものとまったく同じになります。
現実世界の影が単一のレイヤーであることはほとんどありません。レイヤー リストを使用すると、1 つの宣言で最大 4 つのシャドウを積み重ねることができます。つまり、エッジを定義するタイトなダーク ラインとエレベーションを表す幅広のソフト ウォッシュ、またはニューモーフィズムを定義する明暗のペアです。編集するレイヤーを選択し、不要なレイヤーを削除すると、結合されたボックスとシャドウの値がライブで更新されます。
暗いインターフェイスでは影の見え方が大きく異なり、黒に近いページ上の黒い影が単に消えてしまいます。プレビュー背景の切り替えにより、背景が明暗に切り替わるので、出荷前に両方のテーマを確認できます。プリセット ページには、ソフトエレベーション シャドウ、差し込みウェル、2 層ニューモーフィズム レシピ、微妙なカード シャドウなど、人々が実際に検索するバリアントが含まれています。
このサイトのすべてのツールと同様、ジェネレーターは無料で、完全にブラウザー内で実行されます。アップロードやアカウントは不要で、ページが読み込まれるとオフラインで動作し続けます。