CSS gradientkant: fire måter å tegne en på

En gradientkant i CSS er et omriss der fargen blandes langs lengden. Haken er at border-color bare tar farger, ikke bilder, så det finnes ingen enkelt egenskap for det. I stedet tegner du gradienten et annet sted og viser bare et tynt bånd av den. Det finnes fire pålitelige måter å gjøre det på, og den riktige avhenger av to spørsmål: har elementet avrundede hjørner, og må innsiden være gjennomsiktig?

Metode 1: border-image

border-image godtar et hvilket som helst bilde, en gradient inkludert. Sett en kantbredde og en stil, deretter gradienten, og så en slice på 1, som forteller nettleseren at hele bildet skal brukes som kant. Det er to linjer, virker overalt og lar innsiden av elementet være urørt.

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

Metode 2: to bakgrunner med background-clip

Gi elementet en gjennomsiktig kant, og stable deretter to bakgrunner. Det øverste laget er den indre fyllfargen, klippet til padding-box, så den stopper ved kantens innside. Det nederste laget er gradienten, klippet til border-box, så den strekker seg under kanten. Der fyllet stopper, vises gradienten, 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;
}

Dette er metoden du bør ta som standard. Den eneste begrensningen er at innsiden må være ugjennomsiktig, siden et gjennomsiktig fyll ville avslørt gradienten over hele kortet. For kort som ligger på en flat sidefarge er det ingen begrensning i det hele tatt: bruk sidefargen som fyll.

Metode 3: masketeknikken til gjennomsiktige innsider

Når kortet ligger over et foto eller en annen gradient, må midten være gjennomsiktig. Legg gradienten på et pseudoelement som dekker kortet, gi det padding lik kantbredden, og masker det så med to lag: ett som bare dekker innholdsboksen og ett som dekker alt. Å ekskludere det ene fra det andre lar bare padding-ringen være 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 hindrer pseudoelementet i å sluke klikk som er ment for kortets innhold. MDNs referanse for mask-composite forklarer sammensettingsnøkkelordene. Dette er metoden bak de fleste glassmorfisme-kort med glødende kanter.

Metode 4: et pseudoelement bak, til glød og animasjon

Plasser et gradient-pseudoelement litt større enn kortet, bak innholdet, og dekk midten med et andre pseudoelement som holder kortets heldekkende fyll. Den synlige kanten er gradienten. Fordi gradienten ligger på sitt eget lag, kan du gjøre en kopi av den uskarp til en glød, 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; }
}

Ytterradien bør være lik innerradien pluss kantbredden, og derfor bruker pseudoelementet 18 px rundt et kort på 16 px. For flere måter å legge bevegelse i gradienter på, se animerte gradienter i CSS.

Designtips for gradientkanter

Gradientkanter fungerer best som understreking. Den samme logikken gjelder knapper, som gradientknapper i CSS tar for seg.