# Figma-gradienter: tips for jevnere resultater

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

Figma lager en gradient på to klikk og en god på tjue. Her er den raske veien gjennom gradienteditoren, samt løsninger på grå midtpartier, fargebånd og CSS som ikke samsvarer.

## The short version

- Figma har fire gradientfyll: lineært, radielt, konisk og diamantformet, alle valgt fra fylltypemenyen i fargevelgeren.
- Retningen og lengden på gradienten styres med håndtak på lerretet, og nye fargestopp legges til ved å klikke på gradientlinjen i velgeren.
- Lange Figma-gradienter mellom fjerne fargetoner kan bli grå i midten, så legg til et midtstopp i en klarere mellomfarge.
- Lineære, radielle og koniske gradienter har direkte motstykker i CSS, men diamantgradienter har ikke det og bør eksporteres som bilder.
- En mesh-lignende gradient i Figma lages vanligvis ved å gjøre en gruppe fargede ellipser uskarp, og korn skjuler fargebånd ved eksport.

For å lage en **Figma-gradient** velger du et lag, klikker på fargeprøven for fyllet og endrer fylltypen fra ensfarget til lineær, radiell, konisk eller diamantformet. Håndtak vises på lerretet: dra dem for å styre retning og rekkevidde, og klikk på gradientlinjen i fargevelgeren for å legge til fargestopp. Det tar sekunder. Å få den til å se jevn, fyldig og identisk ut når den blir kode, krever noen flere vaner. Det handler denne guiden om.

## De fire gradienttypene i Figma

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

Lineært, radielt og konisk fyll, her tegnet med CSS-motstykkene. Diamant har ikke noe CSS-motstykke.

| Figma-fyll | Hva det tegner | CSS-motstykke |
| --- | --- | --- |
| Lineært | En blanding langs en rett linje | `linear-gradient()` |
| Radielt | En blanding utover fra et sentrum, som en ellipse | `radial-gradient()` |
| Konisk | Farger som sveiper rundt et sentrum | `conic-gradient()` |
| Diamant | En blanding utover i en diamant med fire spisser | Ingen; eksporter som bilde |

Gradienttypene i Figma og hvordan de overføres til nett.

Lineært fyll passer de fleste bakgrunner og knapper. Radielt passer glød og spotlys. Konisk tegner fargehjul, urskiver og metallisk glans. Diamant trengs sjelden; det gir en fasettert glød i fire retninger som virker særegen i illustrasjoner, men må bli et punktgrafikkbilde på nett. For hvordan hver type oppfører seg i design generelt, se [gradienttyper](https://gradiently.design/nb/guide/types-of-gradients).

## Bruk gradienteditoren

1. **Sett retningen med håndtakene** Ett håndtak markerer hvor første farge ligger, det andre hvor siste ligger. Dra endehåndtaket forbi rammekanten for en mykere blanding, eller trekk det inn for en kortere, brattere overgang.
2. **Legg til stopp på linjen** Klikk hvor som helst på gradientlinjen i fargevelgeren for å legge til et stopp, og gi det en farge. Velg et stopp og trykk Delete for å fjerne det.
3. **Bruk ugjennomsiktighet til uttoning** Hvert stopp har sin egen ugjennomsiktighet. Ved å tone en farge til 0% kan gradienten ligge over et foto eller et annet fyll.
4. **Stable fyll** Ett lag kan ha flere fyll. Legg en ny gradient med gjennomsiktige områder over den første for å legge glød over grunnblandingen.
5. **Lagre som stil** Lagre det ferdige fyllet som en fargestil, så hele teamet bruker samme gradient. Figma-variabler kan ikke inneholde gradienter, men stiler kan.

> **Radielle håndtak** Radielle og diamantformede fyll har et tredje håndtak som setter bredden på ellipsen uavhengig av høyden. Ved å strekke det lager du en bred horisontglød i stedet for et rundt spotlys.

## Fiks grå midtpartier og grumsete blandinger

Figma blander fargestopp direkte, omtrent slik CSS gjør som standard, og har ikke noe valg for å blande i et perseptuelt fargerom. En lang overgang mellom fjerne fargetoner, som blått til oransje eller blått til gult, blir grå i midten. Løsningen er et midtstopp: velg fargen du vil ha i midtpunktet, vanligvis en klarere mellomtone, og legg den til for hånd. [Grumsete gradienter](https://gradiently.design/nb/guide/muddy-gradients) forklarer fargeteorien.

- To stopp: grå midte: `linear-gradient(90deg, #2563eb, #f97316)`
- Midtstopp lagt til: klart: `linear-gradient(90deg, #2563eb, #db2777 50%, #f97316)`

Blått til oransje, før og etter ett ekstra stopp. Midtstoppet fører blandingen gjennom rosa i stedet for grått.

## Mesh-lignende gradienter i Figma

Figma har ikke et mesh-gradientverktøy, men en overbevisende versjon er rask å lage. Tegn fire eller fem overlappende ellipser i fargene dine inne i en ramme med mørk eller lys bakgrunn. Grupper dem, legg til kraftig laguskarphet på gruppen og klipp innholdet til rammen. Flytt ellipsene for å balansere fargene. Dette er samme idé som lagteknikken i [mesh-gradienter i CSS](https://gradiently.design/nb/guide/css-mesh-gradient), og [mesh-gradienter](https://gradiently.design/nb/guide/mesh-gradients) dekker designsiden.

### Unngå

- Like store ellipser med jevn avstand
- Motsatte fargetoner som overlapper i midten
- Lite uskarphet som etterlater harde ellipsekanter
- Å eksportere en stor, mørk, uskarp mesh-blanding uten korn

### Gjør dette

- Én dominerende fargeflekk, to eller tre mindre
- Nabofarger som overlapper, kontrastfarger holdt fra hverandre
- Nok uskarphet til at ingen kanter står igjen
- Et svakt støylag oppå før eksport

## Legg til korn for å skjule fargebånd

Jevne gradienter eksportert som 8-bits PNG eller JPEG kan vise tydelige trinn, særlig i mørke, langsomme overganger. Et lett støylag bryter opp trinnene. Nyere versjoner av Figma har valg for støy og tekstur i effektpanelet; ellers kan du legge et gjentakende støybilde over gradienten med en blandingsmodus som Overlegg eller Mykt lys ved lav ugjennomsiktighet. [Fargebånd i gradienter](https://gradiently.design/nb/guide/gradient-banding) forklarer hvorfor det virker, og [kornete gradienter](https://gradiently.design/nb/guide/grainy-gradients) hvorfor det også ser bedre ut.

## Eksporter og gjenskap Figma-gradienter i CSS

I utviklermodus eller inspeksjonspanelet viser Figma CSS for gradientfyll. Bruk den som utgangspunkt og sjekk tre ting. Først vinkelen: håndtakene du dro på en ikke-kvadratisk ramme, kan gi en vinkel du ikke ville valgt, så rund den til en ryddig verdi. Deretter fargeprofilen: bruker filen Display P3, kan samme heksadesimale verdier se ulike ut i en sRGB-nettleser. Til slutt stablede fyll: de blir kommaseparerte gradienter, med det øverste Figma-fyllet først.

```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);
}
```

Typiske overføringer til kode. Behold en ensfarget reservebakgrunn hentet fra gradientens mørkeste stopp.

For bilder eksporterer du i 2x for skarpe resultater på skjermer med høy pikseltetthet, og velger helst PNG for gradienter med gjennomsiktighet. For gradienter som må forbli vektor, skriver SVG-eksport lineære og radielle fyll som SVG-gradienter; se [SVG-gradienter](https://gradiently.design/nb/guide/svg-gradients) for å forstå resultatet. Diamantfyll, uskarpe mesh-blandinger og støy blir alltid piksler.

Lager du mange gradientbakgrunner til sosiale innlegg, presentasjoner og bannere, sparer et verktøy som gjengir samme materiale i alle størrelser deg for ny eksport. I Gradiently gjengis en Mark direkte i hvert format fremfor å beskjæres fra én eksport.

## FAQ

### Hvordan lager jeg en gradient i Figma?

Velg et lag, klikk på fyllfargeprøven og endre fra ensfarget til lineært, radielt, konisk eller diamantformet fyll. Dra håndtakene på lerretet og klikk på gradientlinjen for å legge til stopp.

### Hvordan legger jeg til et fargestopp i en Figma-gradient?

Klikk hvor som helst på gradientlinjen i fargevelgeren. Velg et stopp og trykk Delete for å fjerne det.

### Kan Figma lage mesh-gradienter?

Ikke innebygd. Legg flere fargede ellipser oppå hverandre, grupper dem og bruk kraftig laguskarphet, eller bruk en utvidelse.

### Hvorfor ser Figma-gradienten annerledes ut i nettleseren?

Sjekk vinkelen Figma eksporterte, om filen bruker en Display P3-fargeprofil, og om stablede fyll ble overført i riktig rekkefølge.

### Kan jeg kopiere en Figma-gradient som CSS?

Ja, for lineære, radielle og koniske fyll, via utviklermodus eller inspeksjonspanelet. Diamantgradienter har ikke noe CSS-motstykke og bør eksporteres som bilder.