CSS box-shadow ジェネレーター — 重ねた影、ニューモーフィズム、text-shadow
重ねた box-shadow や text-shadow の効果をライブプレビューでデザイン。エレベーション、ニューモーフィズム、グローのプリセット付きで、CSS をコピーできます。
box-shadow: 0 10px 30px -6px rgba(15, 23, 42, 0.18), 0 4px 10px -4px rgba(15, 23, 42, 0.1);
shadow-[0_10px_30px_-6px_rgba(15,23,42,0.18),0_4px_10px_-4px_rgba(15,23,42,0.1)]
すべてブラウザ内で動作します。入力した内容が送信・保存されることはありません。 すべての無料ツールを見る.
不具合や改善できそうな点を見つけましたか？いただいたメッセージはすべて読み、すぐに対応します。
この無料の CSS box-shadow ジェネレーターでは、見た目で影をデザインし、正確な box-shadow または text-shadow の CSS をコピーできます。水平・垂直方向のずれ、ぼかし、広がり、色、不透明度、inset をそれぞれ設定したレイヤーを必要なだけ重ね、背景、色、角の丸みをデザインに合わせて変えられるプレビューカードで確認できます。
リアルな影が 1 つのレイヤーだけでできていることはまずありません。近くにあるくっきりした影と、大きくかすかな影を組み合わせると、ページから浮き上がった物体に見えます。Material Design のエレベーションのレベルもこの仕組みです。ニューモーフィズムには、背景と同じ色のカードに向きの異なる 2 つの影が必要です。プリセットはこうしたパターンをカバーしており、下の解説では box-shadow の構文、重ねたほうがきれいに見える理由、影がレンダリング性能に与える負荷を説明しています。
使い方
- box-shadow か text-shadow を選びます。
- プリセットから始めるか、スライダーで選択中のレイヤーのずれ、ぼかし、広がり、色、不透明度、inset を調整します。
- 「+ レイヤーを追加」でレイヤーを増やし（選択中のレイヤーがコピーされます）、リストでレイヤーを選んで編集し、矢印で並べ替えます。最初のレイヤーがいちばん上に描画されます。
- ページの背景、カードの色、角の丸みを設定して、プレビューをデザインに合わせます。
- CSS か、Tailwind の任意値クラスをコピーします。
よくある質問
box-shadow の各値の意味は？
box-shadow: inset? x-offset y-offset blur spread colour の順です。x のずれは影を右に（負の値なら左に）、y のずれは下に（負の値なら上に）動かします。ぼかし（blur）は輪郭のやわらかさで、0 ならくっきりした輪郭になります。広がり（spread）はぼかす前に影を大きくし（負の値なら小さくなるので、大きなぼかしが側面からはみ出さないようにできます）、inset は要素の外側ではなく内側に影を描きます。複数の影はカンマで区切り、最初の影がいちばん上に描画されます。
やわらかくリアルな影を作るには？
暗い影を 1 つ使うのではなく、不透明度の低い影を 2 つ以上重ねます。接地面用に小さく引き締まった影（0 1px 2px、約 10% の黒）、環境光用に大きくやわらかい影（0 8px 24px、8〜12%）です。大きい影の広がりを少しマイナスにすると、要素の下に収まります。純粋な黒ではなく背景色を暗くした色で影に色味を付けると、色付きのページでより自然に見えます。
ニューモーフィズムの効果を作るには？
要素の背景色を親要素と同じにして、影を 2 つ加えます。右下にずらした暗い影と、左上にずらした明るい（多くは白の）影です。たとえば #e0e5ec の上に 9px 9px 16px rgba(163,177,198,0.6), -9px -9px 16px rgba(255,255,255,0.5) とします。押し込まれた状態には inset にします。操作部品に使う場合は注意が必要です。ニューモーフィズムのボタンは背景とのコントラストが非常に低く、枠線やはっきりした輪郭を加えない限り、UI コンポーネントに求められる WCAG の 3:1 の要件を満たさないことがほとんどです。
box-shadow と filter: drop-shadow() の違いは何ですか？
box-shadow は border-radius も含めた要素の矩形のボックスに沿い、spread と inset に対応しています。filter: drop-shadow() は見えているピクセルに沿うので、透過 PNG、SVG アイコン、クリップした形の輪郭をなぞりますが、spread も inset もなく、1 つの関数で指定できる影は 1 つだけです。カードやボタンには box-shadow、不規則な形の画像やアイコンには drop-shadow を使いましょう。
text-shadow で spread や inset は使えますか？
いいえ。text-shadow で指定できるのは x のずれ、y のずれ、ぼかし、色だけです。縁取りを擬似的に作るには、各方向に 1px ずらしたくっきりした影を 4 つ以上重ねるか（「縁取り」プリセット）、現在は広くサポートされている -webkit-text-stroke を使います。やわらかく不透明度の低い text-shadow は写真の上の白い文字を読みやすくしますが、WCAG のコントラストには算入されません。
box-shadow は性能に悪影響がありますか？
静的な影の負荷は小さいものです。大きなぼかし半径は、たとえば多数のカードでホバー時に box-shadow をアニメーションさせる場合など、毎フレーム再描画されると負荷が大きくなります。定番の手法は、影を疑似要素に付けてその不透明度をアニメーションさせることで、ブラウザはぼかしを再描画せずに GPU で合成できます。
エレベーション：一貫した影のスケール
デザインシステムでは、少数のエレベーションのレベルを定義してそれだけを使い、要素が「どれくらいの高さ」にあるかに意味を持たせます。カードはレベル 1、ドロップダウンは 2 か 3、ダイアログは 4 か 5 です。ここにあるエレベーションのプリセットはこのパターンに従っており、どれも引き締まった影と広い影を組み合わせ、どちらも高さとともに大きくなります。
• レベル 1、静止したカードやリスト項目：0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)。
• レベル 2、浮き上がったカードやホバー中の項目：0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12)。
• レベル 3、ドロップダウンやポップオーバー：0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.1)。
• レベル 4 と 5、モーダルやダイアログ：ずれとぼかしを大きくし、不透明度は 20% 未満のまま。
値をコンポーネントに直接貼り付けるのではなく、CSS カスタムプロパティ（--shadow-1〜--shadow-5）や Tailwind のテーマにレベルとして保存しておけば、スケールを 1 か所で調整できます。
ダークモードでの影
黒に近い背景に黒い影を落としても見えないため、暗いインターフェースでは高さを別の方法で表現します。高い位置にある面ほど背景色を少し明るくし、影を残す場合は大きく、不透明度を高くします。外側の影よりも、控えめな 1px の明るい枠線や内側のハイライト（inset 0 1px 0 rgba(255,255,255,0.06)）のほうが伝わりやすいことがよくあります。「グロー」プリセットのような光彩は、光を奪うのではなく加えるので暗い背景で効果的です。すべてのカードではなく、フォーカス状態やハイライトに使いましょう。
関連する無料ツール
- CSS グラデーション作成 — ドラッグできるカラーストップ、角度ダイヤル、プリセットで線形・放射・円錐グラデーションを作成。CSS や Tailwind のクラスをコピーできます。
- カラーパレット生成 — スペースキーで新しいパレットを生成し、気に入った色をロックし、配色の調和を選び、写真からパレットを抽出できます。CSS、Tailwind、SCSS、JSON、PNG で書き出し。
- コントラストチェッカー — 文字色と背景色を WCAG 2.x の AA・AAA の基準でチェックし、APCA の Lc 値を確認して、基準を満たす最も近い色を見つけられます。
- カラーピッカー＆変換 — 画面上のどこからでも色を取得したり、HEX、RGB、HSL を瞬時に相互変換したりできます。