CSS box-shadowの例：コピーできる40種類の影

CSS box-shadowの例

CSS box-shadowの例：CSSやTailwindでコピーできる40種類の影

プレビューしてCSSやTailwindクラスとしてコピーできる、オリジナルのbox-shadowの例40種類。ソフト、重ね影、下だけ、inset、カラー、ダークモード、エレベーションスケールを収録しています。

ボックスの影は box-shadow: x-offset y-offset blur spread color の形で書き、オプションでinsetキーワードを付けます。柔らかくリアルな影は、通常は不透明度の低い2〜3層を重ねて作ります。下だけの影は、正のyオフセットと負のスプレッドを使います。下の40種類から好きな例を選び、CSSまたはTailwindとしてコピーしてください。

box-shadowの値を構成する5つの要素

多くの影のリストは、画像とCSSを1行示すだけです。このページでは、影がリアルに見える理由と不自然に見える理由も説明し、デザインシステムにそのまま組み込めるエレベーションスケールを用意し、暗い背景でも影を見やすく保つ方法も紹介します。すべての例はオリジナルで、ブラウザー上で実際に動作します。

よくある質問

下側だけにbox-shadowを付けるには？

影に正のyオフセットと、ぼかしとほぼ同じ大きさの負のスプレッドを指定します。たとえば box-shadow: 0 8px 6px -6px rgb(0 0 0 / 0.3) です。負のスプレッドが左右と上から影を内側に引き込むので、下端より下に押し出された部分だけが見えます。

複数の影を使うには？

影をカンマで区切ります。リストの最初の影がほかの影の上に描かれるので、小さく濃い接地影を先に、広く淡い環境影を最後に置きましょう。

暗い背景で影が消えてしまうのはなぜですか？

ほぼ黒のページに黒い影を置くと、コントラストがほとんどありません。ダークテーマでは、浮いた要素に明るめの面の色を使い、細い明るい枠線や1pxのinsetハイライトを加え、影の不透明度を上げましょう。影だけに頼らないことが大切です。

box-shadowとdrop-shadow()の違いは何ですか？

box-shadowは要素のボックスとborder-radiusに沿います。filter: drop-shadow()は表示されているピクセルに沿うので、透過PNGやSVGの形にぴったり付きますが、スプレッド値もinsetオプションもありません。

Tailwindでカスタムの影を書くには？

スペースの代わりにアンダースコアを使った任意値を使います。たとえば shadow-[0_8px_24px_-6px_rgb(0_0_0/0.2)] です。組み込みのスケールはshadow-2xsからshadow-2xlまであり、内側の影にはinset-shadow-smなどが使えます。

重ねた影がよりリアルに見える理由

影は単発ではなくスケールとして

下側だけのbox-shadow

負のスプレッドは影を全方向に縮め、yオフセットがそれを下に押し出します。左右の端から影がはみ出さないよう、スプレッドはぼかしのマイナス値に近づけましょう。

下だけの影3種類

左から、くっきりした縁、柔らかい落ち影、固定ヘッダーの下に使う細い線です。

再利用できるエレベーションスケール

ほとんどのインターフェースは5段階でまかなえます。各段階は前の段階のオフセットとぼかしを2倍にし、その下に小さな接地影の層を残します。

推奨エレベーショントークン

ダークテーマ用の上書きを含むエレベーショントークン

コンポーネントはvar(--shadow-2)を使い、影を直接書き込みません。ダーク用のブロックでは、かすかな縁取りとより深い黒に置き換えます。

単一の影と重ねた影の比較

同じ大きさでも、リアルさが違う

左のカードは大きなぼかし1つを使っています。右のカードは同じ濃さを3層に分けているので、より柔らかく自然に浮いて見えます。

すべて

ソフト

重ね影

下だけ

inset

カラー

ダークモード

大胆

box-shadowの例40種類

影のスタイルで絞り込み

コピー形式

プレビューの背景

ライト

ダーク

クリックしてコピー

コピーしました

影をコピーしました：{v}

{n}種類の影

無料で始める · クレジットカード不要

関連: ガイド｜Webマーケティングと集客を学ぶ

製品

ご利用いただける方

機能

リソース

会社情報

サイトマップを見る