How to Use CSS Inset Box-Shadow for Interior Depth

The CSS box-shadow property with the inset keyword allows developers to draw shadows inside an element's container rather than casting them outward. This article explains how the browser calculates interior shadow projections, how coordinate values change behavior in inset mode, the relationship between inset shadows and border boundaries, and how combining these techniques produces tactile, three-dimensional depth in modern user interfaces.

The Mechanics of the Inset Keyword

By default, the box-shadow property creates a drop shadow that projects away from the element’s outer boundary onto surrounding elements. When the inset keyword is declared, the rendering engine reverses this projection:

box-shadow: inset [horizontal-offset] [vertical-offset] [blur-radius] [spread-radius] [color];

Instead of drawing beneath the element, the browser renders the shadow within the element's perimeter. It sits above the element’s background layers but beneath any nested text, images, or child elements.

Coordinate and Spread Inversion

The spatial calculation shifts relative to the internal edges of the box:

• Horizontal Offset (X): A positive value casts the shadow from the left inner edge toward the right. A negative value casts it from the right inner edge toward the left.
• Vertical Offset (Y): A positive value casts the shadow from the top inner edge downward. A negative value casts it from the bottom inner edge upward.
• Blur Radius: Controls the feathering of the shadow edge as it fades toward the center of the element. A higher blur produces a softer, more ambient falloff.
• Spread Radius: Expands the physical boundary of the shadow inward toward the center, effectively reducing the visible area of the un-shadowed interior. A negative spread radius contracts the shadow back toward the perimeter edges.

Clipping and Border Interaction

Inset shadows originate strictly from the inner edge of the element's border box, aligning with the padding edge. If a border is applied to the element, the inset shadow does not overlap the border; it starts flush against the inner border perimeter.

Furthermore, box-shadow: inset respects the curvature defined by border-radius. If an element has rounded corners, the browser curves the origin contour of the interior shadow accordingly, preserving natural optical perspective along the inner curves.

Creating Realistic Interior Depth

To simulate realistic physical recession—such as a depressed button, a sunken input field, or an embedded card—developers frequently combine multiple inset shadows via a comma-separated list.

By modeling a consistent light source, one inset shadow simulates the occlusion of light along the top and left edges, while a second, subtle, light-colored inset shadow simulates an edge reflection on the opposite bottom and right edges:

.sunken-well {
  background-color: #e0e0e0;
  border-radius: 8px;
  box-shadow: 
    inset 3px 3px 6px rgba(0, 0, 0, 0.2),
    inset -3px -3px 6px rgba(255, 255, 255, 0.7);
}

This dual-shadow technique tricks the eye into perceiving the element as sitting physically below the plane of the surrounding document, adding visual hierarchy and tactile feedback to interactive states.