Inset Shadows vs Drop Shadows: When to Use Each

Understanding the difference between inset and drop shadows is crucial for creating professional, depth-rich designs.

Drop Shadows (Default)

Create the illusion that element floats above the page:

.card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.elevated {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
}

Inset Shadows

Create the illusion of depth going into the page:

.pressed-button {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.input-field {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

Neumorphism Design

Combine both for soft 3D effects:

.neuro-card {
  background: #e0e0e0;
  box-shadow:
    8px 8px 16px #bebebe,
    -8px -8px 16px #ffffff;
}
.neuro-pressed {
  box-shadow:
    inset 4px 4px 8px #bebebe,
    inset -4px -4px 8px #ffffff;
}

Best Practices

• Drop shadows: buttons, cards, modals, tooltips
• Inset shadows: input fields, pressed states, wells
• Both: neumorphic designs, toggle switches
• Keep shadows subtle for better UX
• Match shadow color to background

Common Patterns

Raised Button

.button {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s;
}
.button:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

Create perfect shadows with our Shadow Generator!