CSS ボックスシャドウ生成ツール
端末内で動作し、何も送信されません。すべてブラウザ内で動作し、どこにも送信しません。
プリセット
レイヤー
横のずれ
縦のずれ
ぼかし
広がり
色
コード
CSS
box-shadow:
0 10px 15px -3px rgb(15 23 42 / 0.1),
0 4px 6px -4px rgb(15 23 42 / 0.1);Tailwind CSS
shadow-[0_10px_15px_-3px_rgb(15_23_42_/_0.1),0_4px_6px_-4px_rgb(15_23_42_/_0.1)]既存の影を編集
レイヤー、inset、なめらかなプリセットで CSS の影をデザインし、その場で確認して CSS や Tailwind クラスをコピー。既存の影を貼り付けて編集も可能。
数値を当てずっぽうに入れるのではなく、目で見ながら影を作りましょう。ソフト、ミディアム、ハード（レトロ）、なめらか多層、浮遊、内側、ニューモーフィズム、グローのプリセットから始め、各レイヤーのずれ、ぼかし、広がり、色、不透明度、inset を調整すると、ドラッグに合わせてプレビューが変わります。影は最大 8 レイヤーまで重ねられ、もっとも自然な影はこうして作られます。結果は CSS や Tailwind のクラスとしてコピー、リンクで共有、またはスタイルシートの box-shadow を貼り付けて続きから編集できます。
よくある質問
ぼかしと広がりの違いは？
ぼかしは影の縁をやわらかくします。0 はくっきりした線で、値を大きくするほど多くのピクセルで薄れていきます。広がりはぼかす前の影を大きく（正）または小さく（負）します。小さな負の広がりと大きなぼかしで、最近の UI によくある内側に収まったやわらかい影になります。
なぜ複数のレイヤーを使うの？
本物の影は物の近くでは濃くくっきり、離れるほど薄くやわらかくなります。1 レイヤーでは両方を表せません。「なめらか多層」のように、ずれとぼかしが倍々になるレイヤーを重ねるとずっと自然に見えます。
inset の影とは？
inset の影はボックスの外ではなく内側に描かれ、ボックスがへこんで見えます。入力欄、くぼみ、押されたボタンに便利です。1 つの影の中で内側と外側のレイヤーを混ぜられます。
box-shadow でページは重くなる？
影がいくつかある程度なら軽いものです。多くの要素に非常に大きなぼかしをかけたり、box-shadow 自体をアニメーションさせたりすると、遅いスマホではフレームレートが落ちることがあります。アニメーションには、影を持たせた疑似要素の不透明度を変える方法がおすすめです。