# Gradienter i Figma: tips för jämnare resultat

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

Figma gör en gradient på två klick och en bra på tjugo. Här är snabbaste vägen genom gradientredigeraren, plus lösningarna på grå mitt, bandning och CSS som inte stämmer.

## The short version

- Figma har fyra typer av gradientfyllning: linjär, radiell, angular och diamant, alla valda i menyn för fyllningstyp i färgväljaren.
- Gradientens riktning och längd ställs in med handtag på arbetsytan, och nya färgstopp läggs till genom att klicka på gradientfältet i väljaren.
- Långa gradienter i Figma mellan avlägsna nyanser kan bli gråa i mitten, så lägg till ett mellanstopp i en ljusare färg däremellan.
- Linjära, radiella och angular-gradienter har direkta CSS-motsvarigheter, men diamantgradienter har inte det och exporteras bäst som bilder.
- En mesh-liknande gradient i Figma görs oftast genom att sudda ut en grupp färgade ellipser, och brus döljer bandning i exporten.

För att göra en **gradient i Figma** markerar du ett lager, klickar på fyllningsrutan och byter fyllningstyp från Solid till Linear, Radial, Angular eller Diamond. Handtag dyker upp på arbetsytan: dra i dem för att bestämma blandningens riktning och räckvidd, och klicka på gradientfältet i väljaren för att lägga till färgstopp. Det tar några sekunder. Att få den jämn, rik och identisk när den väl hamnar i kod kräver några vanor till, och det är vad den här guiden handlar om.

## De fyra gradienttyperna i Figma

- Linjär: `linear-gradient(135deg, #0f172a, #4338ca 55%, #a5b4fc)`
- Radiell: `radial-gradient(ellipse at 50% 50%, #fde68a, #f97316 45%, #7c2d12)`
- Angular: `conic-gradient(from 0deg, #0ea5e9, #a855f7, #f43f5e, #f59e0b, #0ea5e9)`

Linjära, radiella och angular-fyllningar, här ritade med sina CSS-motsvarigheter. Diamond saknar motsvarighet i CSS.

| Figma-fyllning | Vad den ritar | CSS-motsvarighet |
| --- | --- | --- |
| Linear | En blandning längs en rak linje | `linear-gradient()` |
| Radial | En blandning utåt från en mittpunkt, som en ellips | `radial-gradient()` |
| Angular | En svepande färgövergång runt en mittpunkt | `conic-gradient()` |
| Diamond | En blandning utåt i en fyrpunktig diamant | Ingen; exportera som bild |

Figmas gradienttyper och hur de översätts till webben.

Linear passar de flesta bakgrunder och knappar. Radial passar glöd och strålkastarljus. Angular ritar färghjul, mätare och metallglans. Diamond behövs sällan; den ger en fasetterad, fyrvägs glöd som ser särpräglad ut i illustration men måste bli en bitmapp på webben. Hur varje typ beter sig i design i allmänhet får du veta i [typerna av gradienter](https://gradiently.design/sv/guide/types-of-gradients).

## Så använder du gradientredigeraren

1. **Ställ in riktningen med handtagen** Ett handtag markerar var den första färgen sitter, det andra var den sista gör det. Dra slutandtaget förbi ramens kant för en mjukare blandning, eller dra in det för en kortare, brantare.
2. **Lägg till stopp på fältet** Klicka var som helst på gradientfältet i färgväljaren för att lägga till ett stopp och ge det en färg. Markera ett stopp och tryck på Delete för att ta bort det.
3. **Använd stoppets opacitet för toningar** Varje stopp har sin egen opacitet. Genom att tona en färg till 0 % opacitet kan en gradient läggas över ett foto eller en annan fyllning.
4. **Stapla fyllningar** Ett lager kan ha flera fyllningar. Lägg till en andra gradient ovanpå den första, med genomskinliga områden, för att lägga en glöd över en grundblandning.
5. **Spara den som en stil** Spara den färdiga fyllningen som en färgstil så att hela teamet använder samma gradient. Figma-variabler rymmer inte gradienter, men stilar gör det.

> **Radiella handtag** Radiella fyllningar och diamantfyllningar har ett tredje handtag som ställer in ellipsens bredd oberoende av dess höjd. Genom att dra ut det får du en bred horisontglöd i stället för ett runt strålkastarljus.

## Åtgärda grå mitt och grumliga blandningar

Figma blandar färgstopp direkt, ungefär som CSS gör som standard, och har inget alternativ för att blanda i ett perceptuellt färgrum. En lång blandning mellan avlägsna nyanser, till exempel blått till orange eller blått till gult, sjunker ihop till grått i mitten. Lösningen är ett mellanstopp: välj den färg du vill att mittpunkten ska ha, oftast en ljusare nyans däremellan, och lägg till den för hand. [Grumliga gradienter](https://gradiently.design/sv/guide/muddy-gradients) förklarar färgteorin.

- Två stopp: grå mitt: `linear-gradient(90deg, #2563eb, #f97316)`
- Mellanstopp tillagt: levande: `linear-gradient(90deg, #2563eb, #db2777 50%, #f97316)`

Blått till orange, före och efter ett extra stopp. Mellanstoppet leder blandningen via rosa i stället för grått.

## Mesh-liknande gradienter i Figma

Figma har inget verktyg för meshgradienter, men en övertygande version går snabbt att bygga. Rita fyra eller fem ellipser i dina färger, överlappande, inuti en ram med mörk eller ljus bakgrund. Gruppera dem, lägg på en stor Layer blur på gruppen och klipp ramens innehåll. Flytta runt ellipserna för att balansera om färgen. Det är samma idé som den lagerbaserade tekniken i [CSS-meshgradienter](https://gradiently.design/sv/guide/css-mesh-gradient), och [meshgradienter](https://gradiently.design/sv/guide/mesh-gradients) tar upp designsidan.

### Undvik

- Lika stora ellipser med jämna avstånd
- Motsatta nyanser som överlappar i mitten
- Små suddighetsvärden som lämnar hårda ellipskanter
- Att exportera ett stort, mörkt, suddigt mesh utan brus

### Gör så här

- En dominerande klump, två eller tre mindre
- Grannnyanser som överlappar, kontraster hållna isär
- En suddighet så stor att inga kanter finns kvar
- Ett svagt brusskikt ovanpå före exporten

## Lägg till brus för att dölja bandning

Jämna gradienter som exporteras som 8-bitars PNG eller JPEG kan visa synliga steg, särskilt i mörka, långsamma toningar. Ett lätt brusskikt bryter upp de stegen. Nyare versioner av Figma har brus- och texturalternativ i panelen Effects; annars lägger du en kakelbar brusbild ovanpå gradienten med ett blandningsläge som Overlay eller Soft light på låg opacitet. [Gradientbandning](https://gradiently.design/sv/guide/gradient-banding) förklarar varför det fungerar, och [brusiga gradienter](https://gradiently.design/sv/guide/grainy-gradients) varför det också ser bättre ut.

## Exportera och matcha Figma-gradienter i CSS

I Dev Mode eller panelen Inspect visar Figma CSS för gradientfyllningar. Se det som en utgångspunkt och kontrollera tre saker. Först vinkeln: handtagen du drog på en icke-kvadratisk ram kan översättas till en vinkel du inte hade valt, så avrunda den till ett rent värde. Sedan färgprofilen: om din fil använder Display P3 kan samma hexvärden se annorlunda ut i en sRGB-webbläsare. Och sist staplade fyllningar: de blir kommaseparerade gradienter, med översta Figma-fyllningen först i listan.

```css
/* Figma: linear fill, #0f172a to #4338ca to #a5b4fc, top left to bottom right */
.hero {
  background-color: #0f172a;
  background-image: linear-gradient(135deg, #0f172a 0%, #4338ca 55%, #a5b4fc 100%);
}

/* Figma: angular fill */
.dial {
  background-image: conic-gradient(from 0deg, #0ea5e9, #a855f7, #f43f5e, #f59e0b, #0ea5e9);
}
```

Typiska översättningar. Ha en platt reservfärg hämtad från gradientens mörkaste stopp.

För bilder exporterar du i 2x för skarpa resultat på skärmar med hög täthet, och föredrar PNG för gradienter med genomskinlighet. För gradienter som måste förbli vektor skriver SVG-exporten linjära och radiella fyllningar som SVG-gradienter; i [SVG-gradienter](https://gradiently.design/sv/guide/svg-gradients) ser du vad du får. Diamantfyllningar, suddiga mesher och brus kommer alltid ut som pixlar.

Om du bygger många gradientbakgrunder till inlägg i sociala medier, presentationer och banners sparar ett verktyg som renderar samma material i varje storlek dig från att exportera om. I Gradiently renderas ett Mark live i varje format i stället för att beskäras från en export.

## FAQ

### Hur gör jag en gradient i Figma?

Markera ett lager, klicka på fyllningsrutan och byt Solid till Linear, Radial, Angular eller Diamond. Dra i handtagen på arbetsytan och klicka på gradientfältet för att lägga till stopp.

### Hur lägger jag till ett färgstopp i en Figma-gradient?

Klicka var som helst på gradientfältet i färgväljaren. Markera ett stopp och tryck på Delete för att ta bort det.

### Kan Figma göra meshgradienter?

Inte direkt. Låt flera färgade ellipser överlappa, gruppera dem och lägg på en stor Layer blur, eller använd ett plugin.

### Varför ser min Figma-gradient annorlunda ut i webbläsaren?

Kontrollera vinkeln Figma exporterade, om filen använder färgprofilen Display P3 och om staplade fyllningar översattes i rätt ordning.

### Kan jag kopiera en Figma-gradient som CSS?

Ja för linjära, radiella och angular-fyllningar, via Dev Mode eller panelen Inspect. Diamantgradienter har ingen CSS-motsvarighet och bör exporteras som bilder.