Goal
You’ll be able to add a realistic-looking shadow and a smooth gradient, and understand precisely why certain value choices read as subtle polish while others read as visual clutter.
Learn
box-shadow adds a shadow around an element’s box:
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
The four values are, in order: horizontal offset, vertical offset, blur radius, and color. That color is often written using rgba() rather than a plain hex code specifically so its opacity (the fourth number, from 0 to 1) can be set separately — a low-opacity black, like 0.15, produces a soft, realistic look rather than a harsh solid gray shape.
linear-gradient creates a smooth color transition instead of a single flat color:
background: linear-gradient(135deg, #7DCFFF, #F7768E);
The angle (135deg here) controls the direction the gradient flows; the two colors are the start and end points of that transition. You can add more than two colors too, each with an optional specific stop position along the gradient.
Decision Task
You add box-shadow: 0 8px 24px rgba(0,0,0,0.9); to a card, expecting a subtle, professional lift effect. Instead, it looks heavy and harsh, almost like a dark smudge sitting under the card. Before reading on: which single number in that value is most likely the actual problem?
Reveal the Answer
The opacity value, 0.9 — that’s 90% opaque black, far too dark and solid for a soft, subtle shadow effect. Realistic, professional-looking shadows typically use much lower opacity values, often somewhere between 0.1 and 0.25, letting the shadow blend softly into the background rather than reading as a hard, dark shape sitting on top of everything.
Common Mistake
Stacking too many visual effects at once on the same element — a heavy shadow, a strong gradient, a bold border, all together — each individually reasonable in isolation, but visually overwhelming combined. Real, professional-looking visual polish usually comes from restraint: applying one or two subtle effects deliberately, not every available effect at maximum strength simultaneously.
Practice Questions
1. Write a box-shadow value that’s soft and subtle: small offset, moderate blur, and a low-opacity black.
Show Answer
box-shadow: 0 2px 8px rgba(0,0,0,0.1
2. Write a linear-gradient going from top to bottom (rather than at an angle), from a light blue to a darker blue.
Show Answer
background: linear-gradient(180deg, lightblue, darkblue);
3. A shadow looks like a hard dark rectangle rather than a soft lift effect. Diagnose the two most likely value problems, based on this lesson.
Show Answer
Either the opacity is too high (close to 1, making it too solid/dark), or the blur radius is too small (making the edges too sharp/hard rather than softly diffused).
4. True or False: using rgba() instead of a plain hex code for a shadow’s color is mainly about allowing a separate opacity value.
Show Answer
True — rgba() lets you set opacity as a fourth value, which plain hex codes (like #00000
5. Explain, using this lesson’s reasoning about restraint, why a card with a shadow, a gradient background, AND a thick colored border might look worse than a card with just one of these effects.
Show Answer
Each effect individually draws visual attention; combined, they compete with each other and with the card’s actual content, overwhelming the eye rather than creating a clean, deliberate sense of polish — restraint (one or two effects, chosen deliberately) usually reads as more professional than maximal styling.
Try It Yourself
You want a button that looks like it’s gently glowing on hover, without a harsh edge. Would you increase the shadow’s blur radius, or its offset distance, to get a soft glow-like effect rather than a directional drop shadow?
Show Answer
increase the blur radius significantly while keeping offset small or zero — a large blur with near-zero offset reads as a soft glow; a small blur with larger offset reads as a directional drop shadow.
Quick Check
1. What do the four values in box-shadow represent, in order?
Show Answer
Horizontal offset, vertical offset, blur radius, color.
2. Why do professional-looking shadows usually use low opacity values?
Show Answer
High opacity reads as heavy and harsh; low opacity blends more naturally.
3. What creates a soft glow effect rather than a directional shadow?
Show Answer
A large blur radius with little to no offset.
4. You want a button that looks like it’s gently glowing on hover, without a harsh edge. Would you increase the shadow’s blur radius, or its offset distance, to get a soft glow-like effect rather than a directional drop shadow?
Show Answer
increase the blur radius significantly while keeping offset small or zero — a large blur with near-zero offset reads as a soft glow; a small blur with larger offset reads as a directional drop shadow.
5. You add box-shadow: 0 8px 24px rgba(0,0,0,0.9); to a card, expecting a subtle, professional lift effect. Instead, it looks heavy and harsh, almost like a dark smudge sitting under the card. Before reading on: which single number in that value is most likely the actual problem?
Show Answer
The opacity value, 0.9 — that’s 90% opaque black, far too dark and solid for a soft, subtle shadow effect. Realistic, professional-looking shadows typically use much lower opacity values, often somewhere between 0.1 and 0.25, letting the shadow blend softly into the background rather than reading as a hard, dark shape sitting on top of everything.