# CSS-gradientram: fyra sätt att rita en

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

border-color tar ingen gradient, så varje gradientkontur är en genväg runt problemet. Här är de fyra som räknas, vad var och en kan och inte kan, och vilken du ska välja.

## The short version

- CSS kan inte lägga en gradient i border-color, så en gradientram i CSS ritas alltid med en annan teknik.
- border-image med en gradient är den kortaste metoden, men den ignorerar border-radius, så den passar bara raka hörn.
- Två bakgrundslager, ett klippt till padding-boxen och ett till border-boxen, ger en rundad gradientram så länge insidan är en enfärgad yta.
- Masktekniken skär ut mitten ur ett gradientlager, vilket ger en rundad gradientram med genomskinlig insida.
- En roterande konisk gradient, styrd av en egen egenskap som registrerats med @property, är det vanliga sättet att animera en gradientram.

En **gradientram i CSS** är en kontur vars färg blandas längs dess längd. Haken är att `border-color` bara tar färger, inte bilder, så det finns ingen enskild egenskap för det. I stället ritar du gradienten någon annanstans och visar bara ett tunt band av den. Det finns fyra pålitliga sätt att göra det, och det rätta beror på två frågor: har elementet rundade hörn, och måste insidan vara genomskinlig?

| Metod | Rundade hörn | Genomskinlig insida | Bäst för |
| --- | --- | --- | --- |
| `border-image` | Nej | Ja | Raka kort, avdelare, tabeller |
| Två bakgrunder | Ja | Nej, kräver en enfärgad fyllning | De flesta kort och knappar |
| Mask på ett pseudoelement | Ja | Ja | Kort över bilder eller gradienter |
| Pseudoelement bakom | Ja | Nej | Sken och animerade ringar |

Välj utifrån de två frågorna: hörn och insida.

- Violett till cyan: `linear-gradient(135deg, #7c3aed, #22d3ee)`
- Mandarin till magenta: `linear-gradient(135deg, #f97316, #db2777)`
- Lime till turkos: `linear-gradient(135deg, #a3e635, #0d9488)`
- Silverkant: `linear-gradient(135deg, #e5e7eb, #6b7280, #f9fafb)`

Gradienter som fungerar bra som tunna konturer. Hög mättnad betyder mer på en linje på 2 px än på en hel bakgrund.

## Metod 1: border-image

`border-image` accepterar vilken bild som helst, även en gradient. Ange en ramtjocklek och stil, sedan gradienten och därefter en slice på `1`, som talar om för webbläsaren att använda hela bilden som kant. Det är två rader, fungerar överallt och lämnar elementets insida orörd.

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

Den kortaste gradientramen. `1` är slice-värdet. Utan det ritas ramen bara i hörnen.

> **Inga rundade hörn** Med `border-image` klipper `border-radius` fortfarande bakgrunden, men själva ramen förblir rak. Om elementet måste vara rundat använder du någon av de andra metoderna.

## Metod 2: två bakgrunder med background-clip

Ge elementet en genomskinlig ram och stapla sedan två bakgrunder. Det översta lagret är den inre fyllningen, klippt till `padding-box`, så det slutar vid ramens insida. Det nedersta lagret är gradienten, klippt till `border-box`, så den sträcker sig under ramen. Där fyllningen slutar syns gradienten, och den följer `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;
}
```

Fyllningen skrivs som en enfärgad gradient eftersom bara bilder kan läggas i lager på det här sättet.

Det här är metoden att välja som standard. Dess enda begränsning är att insidan måste vara ogenomskinlig, eftersom en genomskinlig fyllning skulle avslöja gradienten över hela kortet. För kort som ligger på en platt sidfärg är det ingen begränsning alls: använd sidfärgen som fyllning.

> **Därför spelar kortformen roll** Om du skriver `border-box` en gång i kortformen `background` sätts både `background-origin` och `background-clip`, så gradienten får storlek efter den yttre kanten. Om du bara sätter `background-clip: border-box` som enskild egenskap får gradienten storlek efter padding-boxen och upprepas under ramen, vilket lämnar tunna remsor av fel färg längs kanterna.

## Metod 3: masktekniken för genomskinliga insidor

När kortet ligger över ett foto eller en annan gradient måste mitten vara genomskinlig. Lägg gradienten på ett pseudoelement som täcker kortet, ge det padding lika med ramens tjocklek och maska det sedan med två lager: ett som bara täcker innehållsboxen och ett som täcker allt. Om du utesluter det ena från det andra blir bara 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 genomskinlig mitt. Paret med prefix täcker äldre WebKit och standardraden `mask` täcker allt nuvarande.

`pointer-events: none` hindrar pseudoelementet från att svälja klick som är avsedda för kortets innehåll. [MDN:s referens för mask-composite](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite) förklarar sammansättningsnyckelorden. Det här är metoden bakom de flesta [glasmorfism](https://gradiently.design/sv/guide/glassmorphism)-kort med lysande kanter.

## Metod 4: ett pseudoelement bakom, för sken och animation

Placera ett gradientpseudoelement något större än kortet, bakom dess innehåll, och täck mitten med ett andra pseudoelement som håller kortets enfärgade fyllning. Den synliga kanten är gradienten. Eftersom gradienten ligger på ett eget lager kan du sudda en kopia av den för ett sken, eller rotera 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 animerad gradientram. Den registrerade `--angle` låter webbläsaren interpolera den koniska startvinkeln mjukt, och `::after` målar fyllningen över mitten.

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

Att upprepa den första färgen i slutet döljer sömmen medan den vrider sig. [Koniska gradienter i CSS](https://gradiently.design/sv/guide/css-conic-gradient) går igenom funktionen på djupet.

Den yttre radien ska vara lika med den inre radien plus ramens tjocklek, vilket är varför pseudoelementet använder 18 px runt ett kort på 16 px. För fler sätt att få in rörelse i gradienter, se [animerade gradienter i CSS](https://gradiently.design/sv/guide/css-animated-gradient).

## Designtips för gradientramar

### Undvik

- Gradientramar på varje kort i ett rutnät
- Gradienter med låg mättnad på en linje på 1 px, som läses som grå
- En gradientram och en gradientfyllning på samma element
- Snabbt snurrande ringar på innehåll som folk behöver läsa

### Gör så här

- Spara gradientkanten åt ett enda framhävt objekt, som ett rekommenderat abonnemang
- Använd 2 px eller mer och mättade stopp
- En lugn fyllning med en levande kant, eller tvärtom
- Långsam rotation, pausad vid reducerad rörelse

Gradientramar fungerar bäst som betoning. Samma logik gäller för knappar, som tas upp i [gradientknappar i CSS](https://gradiently.design/sv/guide/css-gradient-button).

## FAQ

### Hur gör jag en gradientram i CSS?

Det snabbaste sättet är `border: 3px solid; border-image: linear-gradient(135deg, #7c3aed, #22d3ee) 1;`. För rundade hörn använder du två bakgrunder klippta till `padding-box` och `border-box`.

### Varför fungerar inte border-radius med border-image?

Enligt specifikationen rundas inte en ram som ritas med `border-image` av `border-radius`. Använd metoden med background-clip eller mask för rundade gradientramar.

### Hur gör jag en gradientram med genomskinlig bakgrund?

Använd masktekniken: ett pseudoelement med gradienten, padding lika med ramens tjocklek och en mask som utesluter dess innehållsbox.

### Hur animerar jag en gradientram?

Registrera en vinkel med `@property`, använd den som `from`-vinkel i en konisk gradient på ett pseudoelement och animera egenskapen från 0deg till 360deg.

### Vilken metod för gradientram ska jag använda?

Använd två bakgrunder för de flesta rundade kort och knappar, `border-image` för raka kanter och masktekniken bara när insidan måste förbli genomskinlig.