Backgrounds, Borders, and Effects

Surface effects establish grouping and depth. A restrained system is easier to read than many unrelated shadows and gradients.

Layer backgrounds

01.hero {
02  background:
03    radial-gradient(circle at 80% 20%, rgb(217 198 227 / 55%), transparent 35%),
04    linear-gradient(180deg, #fff, #f7f6f8);
05  border: 1px solid #ded9e1;
06  border-radius: 0.75rem;
07}

The first background is painted on top. Use background-size, position, and repeat for each layer when needed.

Shadows and filters

01.dialog { box-shadow: 0 1.5rem 4rem rgb(37 24 42 / 18%); }
02.icon { filter: drop-shadow(0 0.25rem 0.5rem rgb(37 24 42 / 20%)); }

Box shadows follow the element box; drop shadows follow visible alpha. Filters and backdrop filters can be expensive on large animated regions.

Keep this

Build a small elevation system, prefer subtle separation, and profile filters or large blurred shadows before shipping.