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

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

border-color tager ikke en gradient, så hver gradientkontur er en omvej. Her er de fire, der tæller, hvad hver kan og ikke kan, og hvilken du skal vælge.

## The short version

- CSS kan ikke lægge en gradient i border-color, så en CSS-gradientkant tegnes altid med en anden teknik.
- border-image med en gradient er den korteste metode, men den ignorerer border-radius, så den passer kun til skarpe hjørner.
- To baggrundslag, ét klippet til padding-boksen og ét til border-boksen, giver en afrundet gradientkant, så længe indersiden er en massiv farve.
- Masketeknikken skærer midten ud af et gradientlag, hvilket giver en afrundet gradientkant med en gennemsigtig inderside.
- En roterende conic gradient, styret af en brugerdefineret egenskab registreret med @property, er den sædvanlige måde at animere en gradientkant 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 | Afrundede hjørner | Gennemsigtig inderside | Bedst til |
| --- | --- | --- | --- |
| `border-image` | Nej | Ja | Skarpe kort, skillelinjer, tabeller |
| To baggrunde | Ja | Nej, kræver en massiv fyldfarve | De fleste kort og knapper |
| Maske på et pseudoelement | Ja | Ja | Kort oven på billeder eller gradienter |
| Pseudoelement bagved | Ja | Nej | Skær og animerede ringe |

Vælg efter de to spørgsmål: hjørner og inderside.

- Violet 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, der læses godt som tynde konturer. Høj mætning betyder mere på en linje på 2 px end på en hel baggrund.

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

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

Den korteste gradientkant. `1` er udsnitsværdien. Uden den tegnes kanten kun i hjørnerne.

> **Ingen afrundede hjørner** Med `border-image` klipper `border-radius` stadig baggrunden, men selve kanten forbliver skarp. Skal elementet være afrundet, så brug en af de andre metoder.

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

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

Fyldningen skrives som en énfarvet gradient, fordi kun billeder kan lægges i lag på den måde.

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.

> **Hvorfor stenografien betyder noget** At skrive `border-box` én gang i `background`-stenografien sætter både `background-origin` og `background-clip`, så gradienten får størrelse efter den ydre kant. Sætter du kun `background-clip: border-box` i længere form, får gradienten størrelse efter padding-boksen og gentages under kanten, så der bliver tynde striber af den forkerte farve langs kanterne.

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

```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 gennemsigtigt centrum. Det præfikserede par dækker ældre WebKit, og den standardiserede `mask`-linje dækker alt, der er nuværende.

`pointer-events: none` forhindrer pseudoelementet i at sluge klik, der er ment til kortets indhold. [MDN’s reference for mask-composite](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite) forklarer sammensætningsnøgleordene. Det er metoden bag de fleste [glassmorphism](https://gradiently.design/da/guide/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.

```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 animeret gradientkant. Den registrerede `--angle` lader browseren interpolere den koniske startvinkel jævnt, og `::after` maler fyldningen over midten.

Den roterende rings gradient: `conic-gradient(from 0deg, #7c3aed, #22d3ee, #f472b6, #7c3aed)`

At gentage den første farve til sidst skjuler sømmen, når den drejer. [CSS conic gradients](https://gradiently.design/da/guide/css-conic-gradient) gennemgår funktionen i dybden.

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

## Designtips til gradientkanter

### Undgå

- Gradientkanter på hvert kort i et gitter
- Gradienter med lav mætning på en linje på 1 px, som læses som grå
- En gradientkant og en gradientfyldning på det samme element
- Hurtigt roterende ringe på indhold, folk skal læse

### Gør

- Spar gradientkanten til ét fremhævet element, som en anbefalet plan
- Brug 2 px eller mere og mættede stop
- En rolig fyldning med en levende kant, eller omvendt
- Langsom rotation, sat på pause ved reduceret bevægelse

Gradientkanter virker bedst som fremhævning. Den samme logik gælder knapper, som gennemgås i [gradientknapper i CSS](https://gradiently.design/da/guide/css-gradient-button).

## FAQ

### Hvordan laver jeg en gradientkant i CSS?

Den hurtigste måde er `border: 3px solid; border-image: linear-gradient(135deg, #7c3aed, #22d3ee) 1;`. Til afrundede hjørner bruger du to baggrunde klippet til `padding-box` og `border-box`.

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

Ifølge specifikationen bliver en kant tegnet med `border-image` ikke afrundet af `border-radius`. Brug background-clip- eller maskemetoden til afrundede gradientkanter.

### Hvordan laver jeg en gradientkant med gennemsigtig baggrund?

Brug masketeknikken: et pseudoelement med gradienten, padding svarende til kantbredden og en maske, der udelukker dets indholdsboks.

### Hvordan animerer jeg en gradientkant?

Registrér en vinkel med `@property`, brug den som `from`-vinklen i en conic gradient på et pseudoelement, og animér den egenskab fra 0deg til 360deg.

### Hvilken metode til gradientkant skal jeg bruge?

Brug to baggrunde til de fleste afrundede kort og knapper, `border-image` til skarpe kanter og masketeknikken kun, når indersiden skal forblive gennemsigtig.