# Gradient ring — a border that is really padding

Learned 2026-08-27 measuring the active step card on `resend.com/domains/add`.
The recipe is worth knowing because it is invisible in a screenshot and
unreachable by `border-image` in most cases.

- **Two nested boxes.** Outer carries the gradient as its *background* and a
  2px padding; inner carries the solid fill. The ring is the padding letting
  the parent's gradient show. Measured: outer `border-radius:32px` with
  `padding:2px`, inner `border-radius:30px` — the inner radius is always the
  outer minus the padding, or the corner reads wrong.
- **The stops fade to the ground, not to the accent.** Resend writes
  `from-<accent> via-root to-root` on a `to-r` gradient, where `root` is the
  page background. The ring is bright on one edge and gone by the other, which
  reads as light falling on the card rather than as an outline.
- **State is a stop swap.** At rest all three stops compute to
  `rgba(0,0,0,0)` and the ring is absent; the active state adds the `from-`
  class and the whole thing fades up on the element's own
  `transition duration-200 ease-in-out`. Animating a border colour cannot do
  this — a transparent border still occupies its 2px and shifts the layout.
- **Same recipe, one element, when the fill is also tinted**: put both
  gradients on one box and clip them differently —
  `linear-gradient(42deg,var(--gray-1),var(--gray-2)) padding-box,
   linear-gradient(42deg,var(--gray-a2) 45%,var(--gray-a6)) border-box`
  with `border:1px solid transparent`. Measured on Resend's account avatar,
  as an inline style — a CSS-bundle search never finds this one.