Backgrounds, Borders & Shadows

Surfaces give a design its character: tinted panels, hero images, gradients, rounded corners and soft depth. This chapter covers every background property, border styles, and the shadow recipes behind modern card UIs.

Background properties

.hero {
  background:
    linear-gradient(rgb(15 23 42 / 0.65), rgb(15 23 42 / 0.65)),
    url("/img/hero.jpg") center / cover no-repeat;
  color: white;
  padding: 6rem 1.5rem;
}

Multiple backgrounds: layers are listed front-to-back (gradient on top of image), each with its own size/position/repeat. Expected output: a photo hero darkened by a translucent scrim so the white text stays readable — the standard hero pattern.

cover vs contain

• cover — fills the box, cropping edges (use for decorative heroes).
• contain — fits the whole image, possibly with empty space (use for logos/product shots).

Gradients

.btn-grad {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.soft-blob {
  background: radial-gradient(circle at 30% 20%, #c7d2fe, transparent 60%);
}

Gradients are real images — they never 404 and scale perfectly. Add stops for control: linear-gradient(#eee 40%, #ddd 40%) creates a hard two-tone band.

Borders and radii

.card {
  border: 1px solid #e2e8f0;        /* width style color */
  border-radius: 1rem;              /* uniform */
  border-radius: 16px 16px 0 0;     /* top corners only */
  border-radius: 50%;               /* circle (with equal width/height) */
  border-radius: 30px 5px 30px 5px; /* leaf shape (asymmetric pairs) */
}

.input:focus {
  border-color: #4f46e5;
  outline: none;                    /* replace with a real focus style! */
  box-shadow: 0 0 0 3px rgb(79 70 229 / 0.25);  /* focus ring via shadow */
}

border-radius percentages create ellipses: each corner is an ellipse with horizontal radius X% of the width and vertical Y% of the height.

box-shadow: depth without images

box-shadow: offset-x offset-y blur spread color;

.card {
  box-shadow: 0 10px 30px -8px rgb(15 23 42 / 0.18);
}
.card:hover {
  box-shadow: 0 16px 40px -10px rgb(15 23 42 / 0.25);
}
.inset-note {
  box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.12);  /* inner shadow */
}

• offset-y alone gives a "lifted" look; large blur + small spread = soft diffuse elevation.
• Chaining multiple shadows: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08) — the layered approach many design systems use.
• Spread grows/shrinks the shadow's footprint (negative spread tightens it — great for buttons).

text-shadow

.title-on-image {
  text-shadow: 0 2px 12px rgb(0 0 0 / 0.6);
}

Practical example: the modern card

.card {
  background: #ffffff;
  border: 1px solid rgb(15 23 42 / 0.08);
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow:
    0 1px 2px rgb(15 23 42 / 0.05),
    0 12px 28px -12px rgb(15 23 42 / 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px rgb(15 23 42 / 0.06),
    0 20px 40px -14px rgb(15 23 42 / 0.22);
}

Expected output: a crisp white card with a hairline border and two-layer soft shadow that lifts slightly on hover — the visual language of every modern dashboard.

Accessibility & performance notes

• Text over images needs a scrim (as in the hero) or a strong text-shadow to keep 4.5:1 contrast.
• Large background JPEGs are heavy — compress them, prefer gradients when the image adds no meaning, and consider image-set() for art direction.
• Avoid animating shadows heavily (repaint cost); pair with transform instead — see the animations chapter.

Common mistakes

• White text with no scrim — unreadable over bright image areas.
• Setting outline: none without replacement — use the focus-ring shadow recipe above.
• border-radius on only some corners of connected elements — corners of adjacent boxes won't align; round the group.
• Giant blur radii with high opacity — muddy; keep shadows light (5–25% alpha).

Practice checklist

1. Build a photo hero with a gradient scrim and verify text contrast in dev tools.
2. Create a card with a two-layer shadow and a hover lift.
3. Make a circular avatar with border-radius: 50% + object-fit: cover.

Surfaces set the stage — motion brings it alive: Transitions, Transforms & Animations.