Drop shadow
A soft, offset dark copy of a shape sitting behind it, so the element reads as raised above the page instead of glued flat to it.
See it
What it is
A drop shadow is a blurred, offset copy of a shape painted behind it. Four knobs do all the work: x/y offset (where the imaginary light is), blur radius (how soft), spread (how much bigger than the shape), and color plus opacity. Lift the element further off the surface behind it and its shadow gets longer, bigger, and softer all at once. Softness also tracks how big the light looks from where the element sits: a broad window gives fuzzy edges, a bare bulb gives crisp ones.
Reach for it to encode elevation: which surface is on top. Material Design formalized this into a ladder (resting card, hovered card, dialog), and most design systems copy that idea. Note the two web flavors are different: CSS 'box-shadow' traces the element's box, while 'filter: drop-shadow()' traces the actual alpha silhouette, so it is the one you want for PNG cutouts, SVG icons, and irregular shapes.
Gotcha: pure black at high opacity reads as dirt, not depth. Real shadows are low-opacity and tinted toward the background's hue, and the convincing ones are stacked: a tight dark shadow for contact plus a wide faint one for ambient light. Also watch the cost, since dozens of large-blur shadows repainting on scroll will tank frame rate.
Ask AI for it
Add a layered drop shadow to these cards to sell elevation. Stack two shadows: a tight contact shadow (0 1px 2px, black at 8% opacity) and a wide ambient one (0 12px 24px, black at 10%), both tinted slightly toward the background hue rather than pure black. Keep the light source consistently top-center so every offset is vertical. On hover, raise the element: increase the y-offset and blur, drop the opacity slightly, and transition over 200ms. Use 'filter: drop-shadow()' instead of 'box-shadow' for any non-rectangular shapes or transparent PNGs.