text-shadow — CSS Technical Interview Questions & Answers

Drop shadows applied to text glyphs.

text-shadow

  • Drop shadows applied to text glyphs.
  • text-shadow is a CSS property: it changes how a selected element looks or sits. You write it inside a rule: .card { text: …; }
  • 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 text-shadow is about space, draw the box.

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

Code Examples for text-shadow

text-shadow — working example

.title {
  color: #0f172a;
  text-shadow: 1px 1px 0 #e2e8f0;
}

.glow {
  color: #fff;
  text-shadow: 0 0 8px rgba(37, 99, 235, 0.8);
}

text-shadow paints offset/blurred copies of glyphs; does not affect layout size.

How to Explain text-shadow to an Interviewer

What does text-shadow do?

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