# CSS-gradientgenerator: skriv selv eller bruk verktøy

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

Generert gradientkode kan vanligvis limes rett inn, men er ofte litt utdatert. Lær de fire delene av en gradient, så skriver du en raskere enn du finner en generator, og kan finjustere mer enn glidebryterne tillater.

## The short version

- En CSS-gradientgenerator gjør farge- og vinkelvalg til en background-image-verdi du kan lime inn i et stilark.
- Alle CSS-gradienter har fire deler: type, retning eller posisjon, valgfritt fargerom for interpolasjon og en liste med fargestopp.
- Eldre generatorer gir fortsatt leverandørprefikser og gamle Internet Explorer-filtre som moderne nettlesere ikke trenger.
- Et tredje fargestopp, et fargerom som oklch eller et ekstra lag forbedrer vanligvis generert kode mer enn å endre fargene.
- Å lagre en ferdig gradient i en egendefinert egenskap gjør den gjenbrukbar på hele nettstedet og enkel å endre ett sted.

En **CSS-gradientgenerator** gir deg en gradientverdi du kan lime inn, som `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%)`, etter at du velger farger og vinkel. Det er et godt utgangspunkt. Men en CSS-gradient er kort nok til å skrive selv på under ett minutt, og i håndskrevet kode ligger forbedringene: et tredje stopp, et bedre fargerom, et ekstra lag. Denne siden viser hvordan du leser, rydder og skriver koden selv.

## De fire delene i enhver CSS-gradient

```css
.hero {
  background-image: linear-gradient(
    160deg            /* 1. direction: an angle or "to right" */
    in oklch,         /* 2. optional: the colour space to blend in */
    #1e1b4b 0%,       /* 3. colour stops: colour and position */
    #6d28d9 55%,
    #f472b6 100%
  );
}

/* 4. the type: linear, radial or conic */
.glow { background-image: radial-gradient(circle at 80% 20%, #f472b6, #1e1b4b 70%); }
.dial { background-image: conic-gradient(from 90deg, #6d28d9, #f472b6, #6d28d9); }
```

Alt glidebryterne i en generator styrer, tilsvarer én av disse fire delene.

| Del | Valg | Standard hvis utelatt |
| --- | --- | --- |
| Type | `linear`, `radial`, `conic`, samt `repeating`-versjoner | Ingen, du må velge |
| Retning eller posisjon | `160deg`, `to top right`, `circle at 80% 20%`, `from 90deg` | Fra topp til bunn, sentrert ellipse, fra 0deg |
| Fargerom | `in oklab`, `in oklch`, `in srgb` og andre | sRGB for hex-farger |
| Stopp | Alle farger, med valgfri posisjon i prosent eller lengde | Jevnt fordelt fra 0% til 100% |

Standardene forklarer hvorfor mange genererte gradienter ser like ut: to stopp, jevnt fordelt, blandet i sRGB.

Hver type har sin guide: [lineære gradienter](https://gradiently.design/nb/guide/css-linear-gradient), [radiale gradienter](https://gradiently.design/nb/guide/css-radial-gradient) og [koniske gradienter](https://gradiently.design/nb/guide/css-conic-gradient).

## Gradientoppskrifter du kan kopiere

Disse er skrevet for hånd fremfor generert. Hver bruker en idé en enkel generator sjelden tilbyr: lys utenfor midten, tre stopp i stedet for to eller et valgt fargerom. Klikk på en for å kopiere.

- Skumring, tre stopp: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 50%, #f472b6 100%)`
- Sjøglass: `linear-gradient(135deg, #ecfeff 0%, #99f6e4 50%, #2dd4bf 100%)`
- Glør i hjørnet: `radial-gradient(circle at 85% 15%, #fb923c 0%, #9a3412 35%, #1c0a05 75%)`
- Mykt papir: `linear-gradient(180deg, #fdf6ec 0%, #f5e6d3 100%)`
- Nordlig grønt: `radial-gradient(ellipse at 30% 70%, #34d399 0%, #0f766e 40%, #042f2e 80%)`
- Fiolett til oransje gjennom rosa: `linear-gradient(90deg in oklch, #7c3aed, #f97316)`

Den siste har bare to stopp, men blanding i oklch fører tonen gjennom klart rosa der sRGB gir mattere lilla. Nettlesere uten fargeromstøtte faller tilbake til ingen gradient, så deklarer en vanlig gradient først.

## Slik rydder du koden fra en generator

Limer du inn fra en eldre generator, kan du få fem linjer der én holder. Gradienter med prefiks og Internet Explorer-filteret har vært unødvendige i årevis. De tilfører kodevekt, og den gamle `-webkit-`-syntaksen bruker et annet vinkelsystem som forvirrer den som redigerer senere.

### Typisk gammel kode

- `background: #1e1b4b;` etterfulgt av tre kopier med prefiks
- `-webkit-linear-gradient(left, ...)` med gamle vinkelregler
- `filter: progid:DXImageTransform...` for Internet Explorer
- `rgba(30, 27, 75, 1)` for helt ugjennomsiktige farger

### Ryddig moderne kode

- Én ensfarget `background-color` som reserve
- Én `linear-gradient()` uten prefiks
- Ingen filtre
- Kort hex eller `rgb(30 27 75 / 0.5)` bare der alfa er viktig

```css
.hero {
  background-color: #1e1b4b; /* shows while loading and if the gradient fails */
  background-image: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}
```

Alt den gamle generatoren prøvde å si, på to linjer.

Nettleseren er også en brukbar generator. Åpne utviklerverktøyene, velg elementet og klikk på en fargeprøve i gradienten i Styles-panelet. Du får en fargevelger for stoppet og kan endre vinkler og prosentandeler direkte mens siden oppdateres. Kopier den ferdige verdien tilbake til stilarket. For å tilpasse gradienten til ekte innhold slår dette et frittstående verktøy, fordi du ser den bak den faktiske overskriften.

## Fem endringer som slår en glidebryter

1. **Legg til et midtstopp** To stopp gir en rett overgang. En tredje farge rundt 50 til 60 prosent tilfører dybde og lar deg styre hvor endringen skjer.
2. **Velg fargerom** Legg til `in oklab` for å holde blandinger mellom fjerne farger rene, eller `in oklch` for å la fargetonen bevege seg. [Gradientinterpolasjon](https://gradiently.design/nb/guide/gradient-interpolation) viser forskjellen.
3. **Flytt lyset utenfor midten** Bytt en lineær gradient med `radial-gradient(circle at 80% 20%, ...)`, så den lyseste fargen kommer fra et hjørne som en lyskilde.
4. **Legg to eller tre gradienter i lag** Skill flere verdier med komma i `background-image`. Radiale lys over en lineær base virker langt fyldigere enn én gradient. [CSS-meshgradienter](https://gradiently.design/nb/guide/css-mesh-gradient) tar dette videre.
5. **Legg til litt korn** Et svakt støylag skjuler fargebånd på store, mørke gradienter. Koden står i [CSS-støytekstur](https://gradiently.design/nb/guide/css-noise-texture).

```css
.hero {
  background-color: #0f0b1e;
  background-image:
    radial-gradient(circle at 80% 15%, #f472b6 0%, transparent 40%),
    radial-gradient(circle at 15% 85%, #4338ca 0%, transparent 45%),
    linear-gradient(160deg, #0f0b1e 0%, #1e1640 100%);
}
```

Tre håndskrevne lag: rosa lys øverst til høyre, et indigofelt nederst til venstre og mørk base. Første lag i listen ligger øverst.

## Gjør en gradient til et gjenbrukbart token

Når gradienten er riktig, gi den et navn. En egendefinert egenskap holder hele verdien, så knapper, bannere og toppfelt kan dele den, og en omdesigning endrer én linje. [CSS-variabler til temaer](https://gradiently.design/nb/guide/css-custom-properties-theming) viser hvordan du bytter gradienttokens per merkevare eller modus.

```css
:root {
  --gradient-brand: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}

.hero { background-image: var(--gradient-brand); }
.badge { background-image: var(--gradient-brand); }
```

Én definisjon, brukt overalt. Endres fargene, trenger ingenting annet i stilarket å endres.

## Når en generator ikke er riktig verktøy

Generatorer og håndskrevet CSS har samme begrensning: resultatet er en stoppliste alle kan lese i stilarket og gjenbruke. Det er greit til grensesnittdetaljer. For bakgrunnen folk kjenner deg igjen på, på nettsiden og hvert innlegg, ønsker du kanskje noe fyldigere og vanskeligere å kopiere. Bredere råd finnes i [slik bruker du en gradientgenerator](https://gradiently.design/nb/guide/gradient-generator).

Marks fra Gradiently går utover det CSS kan beskrive: materialer i lag, lys, korn og bevegelse, rendret direkte i hver størrelse, med nøyaktig én eier om gangen. Du kan designe gratis med enhver usikret Mark og søke i Markedet med fargeord for å finne en nær gradienten du forsøkte å skrive.

## FAQ

### Hva er en CSS-gradientgenerator?

Et verktøy der du velger farger, vinkel og type visuelt, og får en `linear-gradient()`-, `radial-gradient()`- eller `conic-gradient()`-verdi å lime inn i CSS.

### Trenger jeg fortsatt -webkit-prefikser for CSS-gradienter?

Nei. Gradienter uten prefiks fungerer i alle nåværende nettlesere. Fjern kopier med prefiks og gamle Internet Explorer-filtre fra generert kode.

### Hvordan skriver jeg en CSS-gradient selv?

Velg type, retning og to eller flere fargestopp: `linear-gradient(160deg, #1e1b4b, #6d28d9 55%, #f472b6)`.

### Hvorfor blir den genererte gradienten grumsete i midten?

Den blander i sRGB, som blir grålig mellom fjerne farger. Legg til `in oklab` etter vinkelen, eller et midtstopp i en renere farge.

### Hvordan gjenbruker jeg en gradient på et nettsted?

Lagre hele gradienten i en egendefinert egenskap som `--gradient-brand` og bruk `var(--gradient-brand)` der du trenger den.