CSS box-shadow: Creating Depth and Elevation
box-shadow fakes depth by casting a shadow from an element's frame. It's used to elevate UI like cards and modals or create inner shadows for pressed states. The footgun: omitting the color causes it to inherit the parent's text color, not black.
Why it exists
Web interfaces are inherently flat. The box-shadow property was created to simulate depth and a third dimension, allowing designers to create visual hierarchy and guide user focus by making elements appear closer to or further from the page surface.
The mental model
Think of box-shadow as controlling a light source shining on an element. You specify the shadow's horizontal (offset-x) and vertical (offset-y) distance from the element, how fuzzy it is (blur-radius), how much it grows before blurring (spread-radius), and its color. You can also place the shadow inside the element's box using the inset keyword.
How it works
The property accepts a series of values. The first two are required lengths for offset-x and offset-y. A third optional length is blur-radius, and a fourth is spread-radius. A color value can be specified at the beginning or end. To create complex effects, you can provide a comma-separated list of multiple shadow definitions, which are layered with the first shadow on top.
When to use it
Use box-shadow to create a sense of elevation for interactive elements like buttons, cards, and modals. It's also great for showing focus states or creating depressed "pressed-in" effects with inset. Stacking multiple, subtle shadows with varying blurs and opacities creates more realistic depth than a single, harsh shadow.
When not to use it
Avoid using heavy, dark shadows that can make the UI look dated or cluttered. Overusing shadows can flatten the visual hierarchy instead of enhancing it. It is not for creating shadows from text content itself; for that, use the text-shadow property. The biggest footgun is omitting the color: the shadow will inherit the parent element's color (text color), which is rarely what you want.
One canonical example
A common use case is a subtle card shadow. A declaration like box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); creates a soft, downward shadow. The 0 for offset-x centers it horizontally. The 4px for offset-y pushes it down. The 8px blur-radius softens the edges. The 0 spread-radius means the shadow is the same size as the element. Finally, rgba(0, 0, 0, 0.2) makes it a semi-transparent black.
Interview question
What happens if the color value is omitted when defining a CSS box-shadow?
- a.The box-shadow property is ignored, and no shadow is rendered.
- b.The shadow defaults to the element's own background color.
- c.The shadow inherits the parent element's computed text color.Correct
- d.The shadow defaults to a semi-transparent black, mimicking a common default.
Why? this is the answer
The card explicitly states that omitting the color causes the shadow to inherit the parent element's text color, which is a common 'footgun' or pitfall. It does not default to black, become ignored, or inherit the background color.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles