CSS gradientkant: fire måder at tegne en på

En CSS-gradientkant er en kontur, hvis farve blander sig langs dens længde. Hagen er, at border-color kun tager farver og ikke billeder, så der findes ingen enkelt egenskab til det. I stedet tegner du gradienten et andet sted og viser kun et tyndt bånd af den. Der er fire pålidelige måder at gøre det på, og den rette afhænger af to spørgsmål: har elementet afrundede hjørner, og skal dets inderside være gennemsigtig?

Metode 1: border-image

border-image accepterer ethvert billede, også en gradient. Angiv en kantbredde og en kantstil, derefter gradienten og til sidst et udsnit på 1, som fortæller browseren, at hele billedet skal bruges som kant. Det er to linjer, virker overalt og lader elementets inderside være urørt.

.panel {
  border: 3px solid;
  border-image: linear-gradient(135deg, #7c3aed, #22d3ee) 1;
}

Metode 2: to baggrunde med background-clip

Giv elementet en gennemsigtig kant, og stak derefter to baggrunde. Det øverste lag er den indre fyldning, klippet til padding-box, så den stopper ved kantens inderside. Det nederste lag er gradienten, klippet til border-box, så den strækker sig ind under kanten. Hvor fyldningen stopper, viser gradienten sig, og den følger border-radius perfekt.

.card {
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#0f172a, #0f172a) padding-box,
    linear-gradient(135deg, #7c3aed, #22d3ee) border-box;
}

Det er den metode, du skal vælge som standard. Dens eneste begrænsning er, at indersiden skal være ugennemsigtig, for en gennemsigtig fyldning ville afsløre gradienten på hele kortet. For kort på en flad sidefarve er det ingen begrænsning overhovedet: brug sidefarven som fyldning.

Metode 3: masketeknikken til gennemsigtige indersider

Når kortet ligger over et foto eller en anden gradient, skal midten være gennemsigtig. Læg gradienten på et pseudoelement, der dækker kortet, giv det padding svarende til kantbredden, og mask det derefter med to lag: ét, der kun dækker indholdsboksen, og ét, der dækker det hele. Udelukker du det ene fra det andet, er kun padding-ringen synlig.

.glass-card {
  position: relative;
  border-radius: 16px;
}

.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px; /* border width */
  border-radius: inherit;
  background: linear-gradient(135deg, #7c3aed, #22d3ee);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  pointer-events: none;
}

pointer-events: none forhindrer pseudoelementet i at sluge klik, der er ment til kortets indhold. MDN’s reference for mask-composite forklarer sammensætningsnøgleordene. Det er metoden bag de fleste glassmorphism-kort med glødende kanter.

Metode 4: et pseudoelement bagved, til skær og animation

Placér et gradientpseudoelement lidt større end kortet bag dets indhold, og dæk midten med et andet pseudoelement, der rummer kortets massive fyldning. Den synlige kant er gradienten. Fordi gradienten ligger på sit eget lag, kan du sløre en kopi af den til et skær eller rotere den.

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.ring {
  position: relative;
  isolation: isolate;
  border-radius: 16px;
}

.ring::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: 18px;
  background: conic-gradient(from var(--angle), #7c3aed, #22d3ee, #f472b6, #7c3aed);
  animation: spin 6s linear infinite;
}

/* the card's fill, painted over the middle of the ring */
.ring::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: #0f172a;
}

@keyframes spin {
  to { --angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .ring::before { animation: none; }
}

Den ydre radius bør svare til den indre radius plus kantbredden, og derfor bruger pseudoelementet 18 px omkring et kort på 16 px. For flere måder at få bevægelse ind i gradienter, se CSS-animerede gradienter.

Designtips til gradientkanter

Gradientkanter virker bedst som fremhævning. Den samme logik gælder knapper, som gennemgås i gradientknapper i CSS.