How many box shadows can I layer in CSS?

There is no limit to the number of box shadows you can layer. Simply separate each shadow definition with a comma. Layered shadows create more realistic depth effects than single shadows.

What is an inset shadow?

An inset shadow appears inside the element instead of outside. Add the 'inset' keyword to create inner shadows, commonly used for pressed button states, input fields, or creating depth effects.

Why does my box-shadow look pixelated?

Increase the blur radius for smoother shadows. Very small blur values (0-2px) create sharp edges. For smooth, natural-looking shadows, use blur values of 10-30px depending on the shadow size.

How do I create a neumorphism effect?

Neumorphism uses two shadows: a light shadow (offset top-left) and a dark shadow (offset bottom-right). Use subtle colors close to the background color and soft blur for the characteristic soft UI look.

CSSボックスシャドウジェネレーター

UI要素にリアルでスムーズなレイヤードシャドウを作成。
オフセット、ブラー、スプレッド、色を視覚的に調整し、CSSをコピー。 100%無料 — 登録不要。

∞シャドウレイヤー

99%+ブラウザサポート

0登録不要

Preview

Box Color

Background

CSS Output:

box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);

Layers

Layer 1

Offset X 0px

Offset Y 4px

Blur 10px

Spread 0px

Opacity 15%

Shadow Color#000000

Inset

一般的な使用例

UIデザインでシャドウが最も影響を与える場所

🃏

カードエレベーション

カードとコンテナに深みを追加。微妙なシャドウで視覚的階層を作成しコンテンツを目立たせる。

🔘

ボタン状態

インセットシャドウで押された/浮いたボタン効果を作成。インタラクティブな状態変化を明確に表示。

🪟

モーダルダイアログ

モーダルやポップアップ用の大きくソフトなシャドウでフローティング効果を作成し背景から分離。

🎨

ニューモーフィズム

ライトとダークシャドウを使用してエンボス加工された3D風のインターフェース要素を作成するソフトUIデザイントレンド。

CSSボックスシャドウを理解する

box-shadowプロパティは要素のフレームの周りに1つ以上のシャドウ効果を追加。text-shadowと違い、box-shadowはスプレッドレイディアスと内側シャドウ用のインセットオプションを持つことができる。

シャドウプロパティ

オフセットX: 水平距離。正=右、負=左。
オフセットY: 垂直距離。正=下、負=上。
ブラーレイディアス: この値が大きいほど、シャドウは大きく明るくなる。負にはできない。
スプレッドレイディアス: 正の値は拡大、負の値は縮小。デフォルト0。
色: シャドウの色。透明度制御にはrgba()を使用。
インセット: シャドウを外側（デフォルト）から内側に変更。押された効果を作成。

自然なシャドウのプロヒント

よりリアルな深みのために複数のレイヤードシャドウを使用。
シャドウの方向をライティングモデルに合わせる。
微妙なシャドウ（低い不透明度、ソフトなブラー）はよりプロフェッショナルに見える。
純粋な黒を避ける—ダークグレーや色付きシャドウを使用。

コード例

異なるUIパターン用のすぐ使えるシャドウ例

CSSBasic Shadows

/* Simple shadow */
.card {
  box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Layered shadow (smoother) */
.smooth-card {
  box-shadow:
    0 1px 3px rgba(0,0,0,0.12),
    0 1px 2px rgba(0,0,0,0.24);
}

/* Large elevation */
.modal {
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

CSSInset & Neumorphism

/* Inset shadow (pressed state) */
.button-pressed {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Neumorphism effect */
.neumorphic {
  background: #e0e5ec;
  box-shadow:
    9px 9px 16px rgba(163,177,198,0.6),
    -9px -9px 16px rgba(255,255,255,0.5);
}

/* Neumorphism pressed */
.neumorphic-pressed {
  box-shadow:
    inset 6px 6px 10px rgba(163,177,198,0.6),
    inset -6px -6px 10px rgba(255,255,255,0.5);
}

よくある質問

何レイヤーまでシャドウを重ねられますか？

制限なし！各シャドウをカンマで区切る。レイヤードシャドウは単一の重いシャドウよりリアルな深みを作成。一般的なパターンは2-4レイヤーを使用。

インセットシャドウは何に使う？

インセットシャドウは要素の内側に表示され、押されたまたはへこんだ外観を作成。ボタンの押された状態、入力フィールド、コンテナ内に深みを作成するのに最適。

シャドウが機能しないのはなぜ？

一般的な問題：overflow: hiddenを持つ要素がシャドウをクリップ、シャドウ色が背景と一致、または親要素がクリップしている。z-indexと親コンテナをチェック。

ニューモーフィズム効果を作成するには？

2つのシャドウを使用：左上にオフセットしたライトシャドウと右下にオフセットしたダークシャドウ。両方ともソフトなブラーと背景に近い色を使用。