Inset / Inner Shadow in CSS — box-shadow inset Examples

The inset keyword in box-shadow places the shadow inside the element’s border rather than outside. This creates a recessed, pressed, or embossed appearance.

Use the Box Shadow Generator to visualize inset shadows with live preview.

Inset syntax

/* Regular (outer) shadow: */
box-shadow: offsetX offsetY blur spread color;

/* Inset (inner) shadow: */
box-shadow: inset offsetX offsetY blur spread color;

Positive offsets move the shadow toward the bottom-right. Negative toward top-left.

Basic inset shadow

.card-recessed {
  background: #f0f4f8;
  padding: 24px;
  border-radius: 12px;
  
  /* Recessed/sunken look: */
  box-shadow:
    inset 2px 2px 6px rgba(0, 0, 0, 0.15),
    inset -2px -2px 6px rgba(255, 255, 255, 0.7);
}

Input field with inset shadow

.text-input {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 1rem;
  
  /* Default: subtle inset */
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.text-input:focus {
  outline: none;
  border-color: #6366f1;
  
  /* Focus: deeper inset + color ring */
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.06),
    0 0 0 3px rgba(99, 102, 241, 0.25);
}

.text-input.error {
  border-color: #ef4444;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.06),
    0 0 0 3px rgba(239, 68, 68, 0.25);
}

Pressed button state

.btn {
  background: #4f46e5;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  
  /* Normal: raised shadow */
  box-shadow:
    0 4px 6px rgba(79, 70, 229, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.2);
  
  transition: all 0.1s ease;
}

.btn:active {
  /* Pressed: remove outer shadow, add inset */
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 1px 2px rgba(0, 0, 0, 0.2);
  transform: translateY(1px);  /* Physical press effect */
}

Well / container effect

/* A "well" — content appears to sit in a depression: */
.well {
  background: #e5e7eb;
  border-radius: 16px;
  padding: 32px;
  
  box-shadow:
    inset 4px 4px 12px rgba(0, 0, 0, 0.15),
    inset -2px -2px 6px rgba(255, 255, 255, 0.5);
}

/* Dark theme well: */
.well-dark {
  background: #1e293b;
  
  box-shadow:
    inset 4px 4px 12px rgba(0, 0, 0, 0.4),
    inset -2px -2px 6px rgba(255, 255, 255, 0.05);
}

Inner glow

/* Color glow on the inside — useful for alerts, status indicators: */
.alert-success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 16px;
  
  box-shadow: inset 0 0 0 4px rgba(34, 197, 94, 0.1);
}

.alert-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  
  box-shadow: inset 0 0 0 4px rgba(239, 68, 68, 0.1);
}

/* Animated inner glow (e.g., for a loading indicator): */
@keyframes inner-glow {
  0%, 100% { box-shadow: inset 0 0 10px rgba(99, 102, 241, 0.2); }
  50% { box-shadow: inset 0 0 20px rgba(99, 102, 241, 0.5); }
}

.loading {
  animation: inner-glow 1.5s ease-in-out infinite;
}

Combining inset and outer shadows

/* Card that appears to both float AND have recessed content area: */
.card-combined {
  background: white;
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  
  /* Card floats: */
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.06);
}

.card-body {
  background: #f8fafc;
  padding: 24px;
  
  /* Content area recessed: */
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.08),
    inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

Related tools

• Box Shadow Generator — design inset and outer shadows
• CSS Box Shadow Guide — box-shadow syntax reference
• Neumorphism CSS — dual-shadow soft UI design