# CSS gradient generator: skriv gradienter i hånden eller med værktøjer

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

Det meste genererede gradientkode kan sagtens indsættes, men er lidt forældet. Lær gradientens fire dele, så kan du skrive en hurtigere, end du kan finde en generator, og derefter finjustere den på måder, ingen skyder tilbyder.

## The short version

- En CSS gradient generator gør farve- og vinkelvalg til en background-image-værdi, du kan indsætte i et stylesheet.
- Hver CSS-gradient har fire dele: en type, en retning eller position, et valgfrit interpolationsfarverum og en liste af farvestop.
- Ældre generatorer udskriver stadig leverandørpræfikser og gamle Internet Explorer-filtre, som moderne browsere ikke har brug for.
- At tilføje et tredje farvestop, et interpolationsrum som oklch eller et andet lag forbedrer som regel genereret kode mere end at ændre farverne.
- At gemme en færdig gradient i en custom property gør den genbrugelig på tværs af et site og let at ændre ét sted.

En **CSS gradient generator** giver dig en gradientværdi at indsætte, som `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%)`, når du har valgt farver og en vinkel. Det er et fint udgangspunkt. Men en CSS-gradient er kort nok til at skrive i hånden på under et minut, og i håndskrevet kode ligger forbedringerne: et tredje stop, et bedre farverum, et andet lag. Denne side viser, hvordan du læser en generators kode, renser den og skriver din egen.

## De fire dele af hver 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, en generators skydere styrer, svarer til en af disse fire dele.

| Del | Muligheder | Standard, hvis udeladt |
| --- | --- | --- |
| Type | `linear`, `radial`, `conic`, plus `repeating`-versioner | Ingen, du skal vælge |
| Retning eller position | `160deg`, `to top right`, `circle at 80% 20%`, `from 90deg` | Top til bund, centreret ellipse, fra 0deg |
| Farverum | `in oklab`, `in oklch`, `in srgb` og andre | sRGB for hex-farver |
| Stop | Alle farver, med valgfrie positioner i procent eller længde | Fordelt jævnt fra 0% til 100% |

Standardværdierne forklarer, hvorfor så mange genererede gradienter ligner hinanden: to stop, jævnt fordelt, blandet i sRGB.

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

## Gradientopskrifter at kopiere

De er skrevet i hånden frem for genereret, og hver bruger én idé, en grundlæggende generator sjældent giver dig: et lys uden for midten, tre stop i stedet for to eller et valgt farverum. Klik på en for at kopiere den.

- Skumring, tre stop: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 50%, #f472b6 100%)`
- Havglas: `linear-gradient(135deg, #ecfeff 0%, #99f6e4 50%, #2dd4bf 100%)`
- Glød i hjørnet: `radial-gradient(circle at 85% 15%, #fb923c 0%, #9a3412 35%, #1c0a05 75%)`
- Blødt papir: `linear-gradient(180deg, #fdf6ec 0%, #f5e6d3 100%)`
- Nordlysgrøn: `radial-gradient(ellipse at 30% 70%, #34d399 0%, #0f766e 40%, #042f2e 80%)`
- Violet til orange gennem pink: `linear-gradient(90deg in oklch, #7c3aed, #f97316)`

Den sidste har kun to stop, men blanding i oklch fører farvetonen gennem en klar pink, hvor sRGB giver en mattere lilla. Browsere uden understøttelse af farverum falder tilbage til ingen gradient, så erklær først en almindelig gradient.

## Sådan renser du genereret kode

Indsæt fra en ældre generator, og du kan få fem linjer, hvor én er nok. Præfikserede gradienter og Internet Explorer-filteret har været unødvendige i årevis. De øger vægten og bruger, i tilfældet med den gamle `-webkit-`-syntaks, et andet vinkelsystem, der forvirrer enhver, der redigerer senere.

### Typisk gammel kode

- `background: #1e1b4b;` og så tre præfikserede kopier
- `-webkit-linear-gradient(left, ...)` med de gamle vinkelregler
- `filter: progid:DXImageTransform...` til Internet Explorer
- `rgba(30, 27, 75, 1)` til helt uigennemsigtige farver

### Ren moderne kode

- Én ensfarvet `background-color` som reserve
- Én upræfikseret `linear-gradient()`
- Ingen filtre
- Kort hex eller `rgb(30 27 75 / 0.5)` kun hvor alfa betyder noget

```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, en gammel generators kode forsøgte at sige, på to linjer.

Din browser er også en habil generator. Åbn udviklerværktøjerne, vælg elementet, og klik på en farveprøve inde i gradienten i panelet Styles: du får en farvevælger til det stop, og du kan redigere vinkler og procenter på stedet, mens siden opdateres live. Kopiér den færdige værdi tilbage i dit stylesheet. Til at finjustere en gradient mod rigtigt indhold slår det ethvert selvstændigt værktøj, fordi du ser den bag din egentlige overskrift.

## Fem rettelser, der slår enhver skyder

1. **Tilføj et midterste stop** To stop giver en lige rampe. En tredje farve ved omkring 50 til 60 procent tilføjer dybde og lader dig styre, hvor skiftet sker.
2. **Vælg farverummet** Tilføj `in oklab` for at holde blandinger mellem fjerne farver rene, eller `in oklch` for at lade farvetonen rejse. [Gradientinterpolation](https://gradiently.design/da/guide/gradient-interpolation) viser forskellen.
3. **Flyt lyset væk fra midten** Byt en lineær gradient ud med `radial-gradient(circle at 80% 20%, ...)`, så den lyseste farve kommer fra et hjørne, som en lyskilde.
4. **Læg to eller tre gradienter i lag** Adskil flere værdier med komma i `background-image`. Radiale glød over en lineær bund ser langt rigere ud end én gradient. [CSS mesh-gradienter](https://gradiently.design/da/guide/css-mesh-gradient) tager det videre.
5. **Tilføj lidt korn** Et svagt støjlag skjuler banding på store, mørke gradienter. Koden står i [CSS-støjtekstur](https://gradiently.design/da/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 lag skrevet i hånden: et pink lys øverst til højre, en indigopøl nederst til venstre, en mørk bund. Det første lag på listen sidder øverst.

## Gør en gradient til et genbrugeligt token

Når en gradient er rigtig, så giv den et navn. En custom property rummer hele værdien, så knapper, bannere og hero-sektionen kan dele den, og et redesign rører én linje. [CSS-variabler til temaer](https://gradiently.design/da/guide/css-custom-properties-theming) viser, hvordan du bytter gradienttokens pr. brand eller tilstand.

```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 definition, brugt overalt. Ændrer farverne sig, behøver intet andet i stylesheetet at gøre det.

## Når en generator ikke er det rette værktøj

Generatorer og håndskrevet CSS deler den samme grænse: resultatet er en liste af stop, som enhver kan læse i dit stylesheet og genbruge. Det er fint til detaljer i brugerfladen. Til den baggrund, folk genkender dig på, på dit site og i hvert opslag, vil du måske have noget rigere og sværere at kopiere. Det bredere råd står i [sådan bruger du en gradient generator](https://gradiently.design/da/guide/gradient-generator).

Marks fra Gradiently går ud over, hvad CSS kan beskrive: stablede materialer, lys, korn og bevægelse, gengivet live i hver størrelse, med præcis én ejer ad gangen. Du kan designe med en hvilken som helst ikke-sikret Mark gratis og søge i Markedet på farveord for at finde en tæt på den gradient, du forsøgte at skrive.

## FAQ

### Hvad er en CSS gradient generator?

Et værktøj, der lader dig vælge farver, vinkel og type visuelt og så udskriver en `linear-gradient()`-, `radial-gradient()`- eller `conic-gradient()`-værdi at indsætte i CSS.

### Har jeg stadig brug for -webkit--præfikser til CSS-gradienter?

Nej. Upræfikserede gradienter virker i alle nuværende browsere. Fjern præfikserede kopier og gamle Internet Explorer-filtre fra genereret kode.

### Hvordan skriver jeg en CSS-gradient i hånden?

Vælg en type, en retning og to eller flere farvestop: `linear-gradient(160deg, #1e1b4b, #6d28d9 55%, #f472b6)`.

### Hvorfor ser min genererede gradient mudret ud i midten?

Den blander i sRGB, som gør farver grå mellem fjerne farver. Tilføj `in oklab` efter vinklen, eller tilføj et midterste stop i en renere farve.

### Hvordan genbruger jeg en gradient på et website?

Gem hele gradienten i en custom property som `--gradient-brand`, og brug `var(--gradient-brand)`, hvor du har brug for den.