box-shadow — CSS Technical Interview Questions & Answers

Drop shadows around an element's box.

box-shadow

  • Drop shadows around an element's box.
  • box-shadow is a CSS property: it changes how a selected element looks or sits. You write it inside a rule: .card { box: …; }
  • Change one value, refresh, say what moved: colour, space, size, or stacking. That is how you learn properties — not by memorising the spec.
  • Trap: putting it on the wrong selector (parent vs child). Trap: px only on a phone page — learn rem/%/flex too when it is layout.
  • Box model reminder: width/height, padding, border, margin are different. If box-shadow is about space, draw the box.

Technical Interview Tip: box-shadow: one rule on .card, then say what changed.

Code Examples for box-shadow

box-shadow — working example

.card {
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  color: #0f172a;
}

.btn {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

box-shadow — gradients paint backgrounds; box-shadow adds elevation without changing layout size.

How to Explain box-shadow to an Interviewer

What does box-shadow do?

A CSS property that changes look/layout Write it in a rule and refresh