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

[Canonical HTML page](https://gradiently.design/nb/guide/css-gradient-border)

border-color tar ikke en gradient, så hver gradientkant er en omvei. Her er de fire som betyr noe, hva hver kan og ikke kan, og hvilken du bør velge.

## The short version

- CSS kan ikke sette en gradient i border-color, så en gradientkant i CSS tegnes alltid med en annen teknikk.
- border-image med en gradient er den korteste metoden, men den ignorerer border-radius, så den passer bare til firkantede hjørner.
- To bakgrunnslag, ett klippet til padding-boksen og ett til border-boksen, gir en avrundet gradientkant så lenge innsiden er en heldekkende farge.
- Masketeknikken klipper ut midten av et gradientlag, noe som gir en avrundet gradientkant med gjennomsiktig innside.
- En roterende konisk gradient, styrt av en egendefinert egenskap registrert med @property, er den vanlige måten å animere en gradientkant 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 | Avrundede hjørner | Gjennomsiktig innside | Best til |
| --- | --- | --- | --- |
| `border-image` | Nei | Ja | Firkantede kort, skillelinjer, tabeller |
| To bakgrunner | Ja | Nei, trenger en heldekkende fyllfarge | De fleste kort og knapper |
| Maske på et pseudoelement | Ja | Ja | Kort over bilder eller gradienter |
| Pseudoelement bak | Ja | Nei | Glød og animerte ringer |

Velg etter de to spørsmålene: hjørner og innside.

- Fiolett til cyan: `linear-gradient(135deg, #7c3aed, #22d3ee)`
- Mandarin til magenta: `linear-gradient(135deg, #f97316, #db2777)`
- Lime til turkis: `linear-gradient(135deg, #a3e635, #0d9488)`
- Sølvkant: `linear-gradient(135deg, #e5e7eb, #6b7280, #f9fafb)`

Gradienter som leses godt som tynne omriss. Høy metning betyr mer på en linje på 2 px enn på en hel bakgrunn.

## 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.

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

Den korteste gradientkanten. `1` er slice-verdien, og uten den tegnes kanten bare i hjørnene.

> **Ingen avrundede hjørner** Med `border-image` klipper `border-radius` fortsatt bakgrunnen, men selve kanten forblir firkantet. Hvis elementet må være avrundet, bruk en av de andre metodene.

## 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.

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

Fyllet er skrevet som en énfarget gradient fordi bare bilder kan legges i lag slik.

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.

> **Hvorfor stenografien betyr noe** Å skrive `border-box` én gang i `background`-stenografien setter både `background-origin` og `background-clip`, så gradienten dimensjoneres etter ytterkanten. Hvis du bare setter `background-clip: border-box` i langform, dimensjoneres gradienten etter padding-boksen og gjentas under kanten, og etterlater tynne striper av feil farge langs kantene.

## 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.

```css
.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;
}
```

En gradientring med gjennomsiktig midte. Det prefikserte paret dekker eldre WebKit, og standardlinjen `mask` dekker alt gjeldende.

`pointer-events: none` hindrer pseudoelementet i å sluke klikk som er ment for kortets innhold. [MDNs referanse for mask-composite](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite) forklarer sammensettingsnøkkelordene. Dette er metoden bak de fleste [glassmorfisme](https://gradiently.design/nb/guide/glassmorphism)-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.

```css
@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; }
}
```

En animert gradientkant. Den registrerte `--angle` lar nettleseren interpolere den koniske startvinkelen jevnt, og `::after` maler fyllet over midten.

Gradienten i den roterende ringen: `conic-gradient(from 0deg, #7c3aed, #22d3ee, #f472b6, #7c3aed)`

Å gjenta den første fargen på slutten skjuler sømmen mens den dreier. [Koniske gradienter i CSS](https://gradiently.design/nb/guide/css-conic-gradient) går i dybden på funksjonen.

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](https://gradiently.design/nb/guide/css-animated-gradient).

## Designtips for gradientkanter

### Unngå

- Gradientkanter på hvert kort i et rutenett
- Gradienter med lav metning på en linje på 1 px, som leses som grå
- En gradientkant og et gradientfyll på det samme elementet
- Raskt spinnende ringer på innhold folk må lese

### Gjør

- Spar gradientkanten til ett fremhevet element, som en anbefalt plan
- Bruk 2 px eller mer og mettede stopp
- Et rolig fyll med en livlig kant, eller omvendt
- Langsom rotasjon, satt på pause for redusert bevegelse

Gradientkanter fungerer best som understreking. Den samme logikken gjelder knapper, som [gradientknapper i CSS](https://gradiently.design/nb/guide/css-gradient-button) tar for seg.

## FAQ

### Hvordan lager jeg en gradientkant i CSS?

Den raskeste måten er `border: 3px solid; border-image: linear-gradient(135deg, #7c3aed, #22d3ee) 1;`. For avrundede hjørner bruker du to bakgrunner klippet til `padding-box` og `border-box`.

### Hvorfor virker ikke border-radius med border-image?

Ifølge spesifikasjonen rundes ikke en kant tegnet med `border-image` av `border-radius`. Bruk background-clip- eller maskemetoden til avrundede gradientkanter.

### Hvordan lager jeg en gradientkant med gjennomsiktig bakgrunn?

Bruk masketeknikken: et pseudoelement med gradienten, padding lik kantbredden og en maske som ekskluderer innholdsboksen.

### Hvordan animerer jeg en gradientkant?

Registrer en vinkel med `@property`, bruk den som `from`-vinkel i en konisk gradient på et pseudoelement, og animer den egenskapen fra 0deg til 360deg.

### Hvilken metode for gradientkant bør jeg bruke?

Bruk to bakgrunner til de fleste avrundede kort og knapper, `border-image` til firkantede kanter, og masketeknikken bare når innsiden må forbli gjennomsiktig.