# CSS-gradientgenerator: skriv gradienter för hand eller med verktyg

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

Det mesta av genererad gradientkod går bra att klistra in men är lite föråldrad. Lär dig gradientens fyra delar så skriver du en snabbare än du hittar en generator, och kan justera den på sätt inget reglage erbjuder.

## The short version

- En CSS-gradientgenerator gör val av färger och vinkel till ett background-image-värde du kan klistra in i en stilmall.
- Varje CSS-gradient har fyra delar: en typ, en riktning eller position, ett valfritt färgrum för interpolation och en lista med färgstopp.
- Äldre generatorer ger fortfarande leverantörsprefix och gamla Internet Explorer-filter, som moderna webbläsare inte behöver.
- Att lägga till ett tredje färgstopp, ett interpolationsrum som oklch eller ett andra lager förbättrar oftast genererad kod mer än att byta färger.
- Att lagra en färdig gradient i en anpassad egenskap gör den återanvändbar över en webbplats och lätt att ändra på ett ställe.

En **CSS-gradientgenerator** ger dig ett gradientvärde att klistra in, som `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%)`, efter att du valt färger och en vinkel. Det är en bra startpunkt. Men en CSS-gradient är kort nog att skriva för hand på under en minut, och i handskriven kod finns förbättringarna: ett tredje stopp, ett bättre färgrum, ett andra lager. Den här sidan visar hur du läser generatorns kod, rensar den och skriver din egen.

## De fyra delarna i varje 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); }
```

Allt en generators reglage styr motsvarar en av de här fyra delarna.

| Del | Alternativ | Standard om den utelämnas |
| --- | --- | --- |
| Typ | `linear`, `radial`, `conic`, plus `repeating`-versioner | Ingen, du måste välja |
| Riktning eller position | `160deg`, `to top right`, `circle at 80% 20%`, `from 90deg` | Uppifrån och ned; centrerad ellips; från 0deg |
| Färgrum | `in oklab`, `in oklch`, `in srgb` och andra | sRGB för hex-färger |
| Stopp | Valfria färger, med valfria positioner i procent eller längd | Jämnt fördelade från 0 % till 100 % |

Standardvärdena förklarar varför så många genererade gradienter ser likadana ut: två stopp, jämnt fördelade, blandade i sRGB.

Varje typ har en egen guide: [linjära gradienter](https://gradiently.design/sv/guide/css-linear-gradient), [radiella gradienter](https://gradiently.design/sv/guide/css-radial-gradient) och [koniska gradienter](https://gradiently.design/sv/guide/css-conic-gradient).

## Gradientrecept att kopiera

De här är skrivna för hand i stället för genererade, och var och en använder en idé som en enkel generator sällan ger dig: ett ljus utanför mitten, tre stopp i stället för två eller ett valt färgrum. Klicka på någon för att kopiera den.

- Skymning, tre stopp: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 50%, #f472b6 100%)`
- Havsglas: `linear-gradient(135deg, #ecfeff 0%, #99f6e4 50%, #2dd4bf 100%)`
- Glöd i hörnet: `radial-gradient(circle at 85% 15%, #fb923c 0%, #9a3412 35%, #1c0a05 75%)`
- Mjukt papper: `linear-gradient(180deg, #fdf6ec 0%, #f5e6d3 100%)`
- Norrskensgrönt: `radial-gradient(ellipse at 30% 70%, #34d399 0%, #0f766e 40%, #042f2e 80%)`
- Violett till orange via rosa: `linear-gradient(90deg in oklch, #7c3aed, #f97316)`

Den sista har bara två stopp, men blandning i oklch för nyansen genom ett klart rosa, där sRGB ger ett matt lila. Webbläsare utan stöd för färgrum får ingen gradient alls, så deklarera en vanlig gradient först.

## Så rensar du generatorns kod

Klistra in från en äldre generator och du kan få fem rader där en räcker. Prefixade gradienter och Internet Explorer-filtret har varit onödiga i åratal; de ger extra vikt och, i fallet med den gamla `-webkit-`-syntaxen, ett annat vinkelsystem som förvirrar den som redigerar senare.

### Typisk gammal kod

- `background: #1e1b4b;` sedan tre prefixade kopior
- `-webkit-linear-gradient(left, ...)` med de gamla vinkelreglerna
- `filter: progid:DXImageTransform...` för Internet Explorer
- `rgba(30, 27, 75, 1)` för helt ogenomskinliga färger

### Ren modern kod

- En enda solid `background-color` som reserv
- En enda oprefixad `linear-gradient()`
- Inga filter
- Kort hex eller `rgb(30 27 75 / 0.5)` bara där alfa spelar roll

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

Allt en gammal generators kod försökte säga, på två rader.

Din webbläsare är också en hyfsad generator. Öppna utvecklarverktygen, markera elementet och klicka på en valfri färgruta inuti gradienten i panelen Styles: du får en färgväljare för det stoppet och kan redigera vinklar och procentvärden på plats medan sidan uppdateras live. Kopiera det färdiga värdet tillbaka till din stilmall. För att justera en gradient mot verkligt innehåll slår det varje fristående verktyg, eftersom du ser den bakom din faktiska rubrik.

## Fem ändringar som slår vilket reglage som helst

1. **Lägg till ett mittstopp** Två stopp ger en rak ramp. En tredje färg vid ungefär 50 till 60 procent ger djup och låter dig styra var förändringen sker.
2. **Välj färgrum** Lägg till `in oklab` för att hålla blandningar mellan avlägsna färger rena, eller `in oklch` för att låta nyansen färdas. [Gradientinterpolation](https://gradiently.design/sv/guide/gradient-interpolation) visar skillnaden.
3. **Flytta ljuset från mitten** Byt en linjär gradient mot `radial-gradient(circle at 80% 20%, ...)` så att den ljusaste färgen kommer från ett hörn, som en ljuskälla.
4. **Lägg två eller tre gradienter i lager** Avgränsa flera värden med komma i `background-image`. Radiella ljus över en linjär bas ser mycket rikare ut än en gradient; [CSS mesh-gradienter](https://gradiently.design/sv/guide/css-mesh-gradient) tar det längre.
5. **Lägg till lite korn** Ett svagt brusskikt döljer bandning på stora, mörka gradienter. Koden finns i [CSS-brustextur](https://gradiently.design/sv/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 lager skrivna för hand: ett rosa ljus uppe till höger, en indigopöl nere till vänster, en mörk bas. Det första lagret i listan ligger överst.

## Att göra en gradient till en återanvändbar token

När en gradient är rätt, ge den ett namn. En anpassad egenskap rymmer hela värdet, så knappar, banners och heron kan dela den, och en omdesign rör en rad. [CSS-variabler för teman](https://gradiently.design/sv/guide/css-custom-properties-theming) visar hur du byter gradienttokens per varumärke eller läge.

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

En definition, använd överallt. Om färgerna ändras behöver inget annat i stilmallen ändras.

## När en generator inte är rätt verktyg

Generatorer och handskriven CSS delar samma gräns: resultatet är en lista stopp som vem som helst kan läsa i din stilmall och återanvända. Det går bra för gränssnittsdetaljer. För bakgrunden folk känner igen dig på, på din webbplats och i varje inlägg, vill du kanske ha något rikare och svårare att kopiera. Det bredare rådet finns i [hur du använder en gradientgenerator](https://gradiently.design/sv/guide/gradient-generator).

Gradiently-Marks går längre än vad CSS kan beskriva: staplade material, ljus, korn och rörelse, renderade live i varje storlek, med exakt en ägare åt gången. Du kan designa med vilken osäkrad Mark som helst gratis och söka i Marknaden på färgord för att hitta en nära gradienten du försökte skriva.

## FAQ

### Vad är en CSS-gradientgenerator?

Ett verktyg där du väljer färger, vinkel och typ visuellt och som sedan ger ett `linear-gradient()`-, `radial-gradient()`- eller `conic-gradient()`-värde att klistra in i CSS.

### Behöver jag fortfarande -webkit--prefix för CSS-gradienter?

Nej. Oprefixade gradienter fungerar i alla aktuella webbläsare. Ta bort prefixade kopior och gamla Internet Explorer-filter från genererad kod.

### Hur skriver jag en CSS-gradient för hand?

Välj en typ, en riktning och två eller fler färgstopp: `linear-gradient(160deg, #1e1b4b, #6d28d9 55%, #f472b6)`.

### Varför ser min genererade gradient lerig ut i mitten?

Den blandar i sRGB, som grånar mellan avlägsna färger. Lägg till `in oklab` efter vinkeln, eller lägg till ett mittstopp i en renare färg.

### Hur återanvänder jag en gradient över en webbplats?

Lagra hela gradienten i en anpassad egenskap som `--gradient-brand` och använd `var(--gradient-brand)` där du behöver den.