Box Shadows & Depths
What are Box Shadows?
Imagine holding a sheet of paper slightly above a desk. If a light is shining from above, the paper casts a soft dark shadow onto the desk. If you lift the paper higher, the shadow becomes larger, blurrier, and spreads out, creating a clear sense of vertical distance.In CSS, the box-shadow property adds drop shadows to elements, creating depth, layering, and realistic 3D elevation. A shadow is defined by 5 parameters:
box-shadow: [horizontal-offset] [vertical-offset] [blur-radius] [spread-radius] [color];
Why does it matter?
Websites are flat 2D planes, but shadows help users understand what elements sit "on top" of others. For example, a card with a subtle shadow looks elevated and clickable. A floating navigation bar with a bottom shadow clearly stays separated from the scrolling page content below.Syntax Breakdown
Let's break downbox-shadow: 2px 4px 8px 0px rgba(0,0,0,0.1);:
horizontal-offset (2px): Shifts the shadow right (positive) or left (negative).vertical-offset (4px): Shifts the shadow down (positive) or up (negative).blur-radius (8px): How soft/fuzzy the shadow edges are. Higher numbers mean softer shadows.spread-radius (0px): Expands or shrinks the shadow shape size. (Optional).color (rgba(...)): The shadow color. Using transparent black (rgba) keeps shadows looking soft and natural.Common Mistakes
#000 or black) looks very harsh and amateurish. Always use semi-transparent colors like rgba(0, 0, 0, 0.1) or rgba(0, 0, 0, 0.15) for professional shadows.Quick Reference
box-shadow — Creates dropshadow outlines.blur-radius — Softness/hardness control.rgba(0,0,0,alpha) — Recommended soft shadow color.Your Task
Set the `box-shadow` of the `.card` class to `5px 5px 10px gray`.
index.html
Type code above to start the lesson.
Live Preview