Gradient borders in CSS, including on glass cards

A hairline that fades from light at the top to nothing at the bottom is what makes a glass card look like it is catching light. CSS makes it awkward: border-image accepts a gradient but ignores rounded corners.

Technique 1: two backgrounds (opaque cards)

.card {
  border: 1px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(180deg, oklch(100% 0 0 / 0.3), transparent) border-box;
}

The first background fills the inside; the second shows only in the border area. Simple and robust, but the inner fill must be opaque, or the gradient shows through the card.

Technique 2: a masked pseudo-element (glass cards)

.glass { position: relative; border-radius: 20px; }
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, oklch(100% 0 0 / 0.35), oklch(100% 0 0 / 0.02));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

The pseudo-element is filled with the gradient, then masked so only its 1px padding ring remains. The card's own background can be as translucent as you like. This is the one to use under backdrop-filter; see glassmorphism that looks expensive.

Choosing the gradient

• Top to bottom, light to nearly nothing: light from above, the most natural.
• Two brand hues at low opacity: more identity, easy to overdo.
• Never full-strength rainbow: it pulls attention from content.

Hover and focus

Raising the gradient's top opacity a little on hover is a quiet, effective state change for a clickable card. Do not use the border alone to show keyboard focus; add a proper focus ring outside it, because a faint hairline getting slightly brighter is not visible enough.

Keep one border style for all cards of a kind, written as a recipe; see component recipes.

The gradient-hairline glass card is the central recipe of Glass Instrument UI, so Claude builds it with the masked technique every time instead of reaching for a grey border.