box-shadow — give the card depth
The example from your message. 5 values: x-offset, y-offset, blur, spread, color.
style.css
v3.1
style.css — the CSS rules
index.html — the HTML structure (what the CSS targets)
Live preview
updates as you type
🧠 How it works
box-shadow syntax: <x-offset> <y-offset> <blur> <spread> <color>. x-offset: positive = right, negative = left. y-offset: positive = down, negative = up. blur: 0 = sharp edge, larger = more diffused. spread: positive = grows, negative = shrinks. color: use rgba() to make the shadow semi-transparent (much more realistic).
✏️ Try these changes
-
Change the first 2px to 10px→ shadow moves further to the right -
Change the second 2px to 10px→ shadow moves further down -
Change 8px (blur) to 30px→ shadow becomes much softer -
Change rgba(0,0,0,0.2) to rgba(0,0,0,0.8)→ shadow becomes darker -
Add 'inset ' at the start (before 2px)→ shadow goes INSIDE the card -
Use negative: -5px -5px 10px rgba(0,0,0,0.3)→ shadow goes up-left (light source from bottom-right)