CSS Inset Box Shadow: Complete Guide with Examples

The inset keyword flips a box-shadow inside the element instead of outside. That one change unlocks pressed states, inner glows, recessed inputs, and more. Here is everything inset shadow does and when to reach for it.

How Inset Shadow Works

Without inset, box-shadow renders outside the element. Add inset and the shadow renders inside, starting from the edges inward.

/* outer shadow */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

/* inner shadow */
box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.15);

The parameter order is the same. inset just tells the browser which side of the border to render on.

Inset shadows are clipped to the element border-box. They cannot render outside element boundaries. This makes them safe — they never cause layout overflow or obscure nearby elements.

Input Field Inset Shadows

Inputs with inset shadows look recessed — like a hole in the form. This communicates "type here" without needing extra explanation.

Standard input

input {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 10px 14px;
}

Focus state — shift to outer glow

input:focus {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04),
              0 0 0 3px rgba(37, 99, 235, 0.25);
  border-color: #2563eb;
  outline: none;
}

The focus state combines an inset shadow (retain the recessed look) with an outer focus ring. This is more visible than just changing border color.

Sell Custom Apparel — We Handle Printing & Free Shipping

Pressed Button Effect with Inset Shadow

Physical buttons sink when pressed. CSS can mimic this with inset shadow on the :active state.

.btn {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: box-shadow 0.1s ease, transform 0.1s ease;
}

.btn:active {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);
  transform: translateY(1px);
}

The default state has a top-edge inner highlight (white inset) plus an outer drop shadow. The active state removes the drop and adds a deeper inset, plus a 1px downward translate. Together these sell the press.

Inner Glow Effect

Inset shadows with color create glowing borders from inside the element.

Soft inner glow (blue)

.glow-box {
  box-shadow: inset 0 0 20px rgba(37, 99, 235, 0.3);
  border: 1px solid rgba(37, 99, 235, 0.4);
  border-radius: 12px;
}

Neon inner glow

.neon-inset {
  box-shadow: inset 0 0 30px rgba(0, 255, 200, 0.4),
              inset 0 0 60px rgba(0, 255, 200, 0.1);
  border: 1px solid rgba(0, 255, 200, 0.6);
  background: #0a0a0a;
  border-radius: 8px;
}

Stack two inset shadows — a tighter concentrated one and a wider diffuse one — for more realistic glow falloff.

Combining Inset and Outer Shadows

You can use inset and outer shadows on the same element by comma-separating them:

.layered {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.1),          /* outer drop */
    inset 0 1px 0 rgba(255, 255, 255, 0.2),  /* inner top highlight */
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);      /* inner bottom shadow */
}

This technique gives UI elements a three-dimensional appearance — a raised card with an internal bevel. The outer shadow lifts it. The inset highlights define the surface angle.

Frequently Asked Questions

Does inset shadow affect layout or element size?

No. Box-shadow (inset or outer) does not affect layout. It is rendered on top of the element without changing its dimensions or position in the document flow.

Can I animate between an inset and outer box-shadow?

Yes, but carefully. CSS transition can animate box-shadow values if both states have the same number of shadows. To animate between inset and outer, use a transparent placeholder in one state and the real shadow in the other.

Why is my inset shadow not visible on a dark background?

Dark inset shadows disappear on dark backgrounds. Swap to a white or light-colored shadow: inset 0 2px 4px rgba(255, 255, 255, 0.1). On dark UIs, inset highlights rather than shadows create depth.