# 60 gradientfärgkombinationer som fungerar, med koder

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

Sextio gradienter, sorterade efter känslan du vill ha snarare än efter nyans. Var och en är en levande CSS-kod du kan kopiera, och varje grupp förklarar regeln som får dess övergångar att fungera.

## The short version

- De bästa gradientfärgkombinationerna använder antingen närliggande nyanser, som blandas rent, eller överbryggar avlägsna nyanser med en vald mellanfärg.
- Lugna gradienter håller nyans och ljushet nära varandra; djärva gradienter driver mättnad och nyansavstånd långt.
- Mörka gradienter fungerar bäst som en nästan svart botten med en upplyst färg, och pastellgradienter fungerar bäst som bleka grannar med mörkt bläck till texten.
- Att välja en gradient efter stämning först och sedan efter nyans ger jämnare resultat än att välja färger man gillar en i taget.
- Vilken kombination som helst här kan göras mer särpräglad med en tredje färg, en annan vinkel eller ett lager korn.

De bästa **gradientfärgkombinationerna** följer en av två regler: de använder nyanser som ligger bredvid varandra på färghjulet, så att övergången förblir ren, eller så överbryggar de avlägsna nyanser med en vald mellanfärg, så att den aldrig blir grå. Nedan finns 60 kombinationer som följer de reglerna, sorterade efter stämning: lugna, djärva, varma, svala, mörka och pastell. Kopiera vilket prov som helst som CSS och läs sedan anteckningen under varje grupp för att se varför de fungerar, så att du kan göra dina egna.

Allt här är ren CSS med hexfärger, så det fungerar i vilken webbläsare som helst, och samma koder kan skrivas in i vilket designverktyg som helst. Om en term är ny förklarar [vad en gradient är](https://gradiently.design/sv/guide/what-is-a-gradient) stopp och vinklar.

## Lugna gradientkombinationer

Lugna gradienter håller sina färger nära varandra i både nyans och ljushet. Ingenting hoppar, så ögat vilar. De blir bra bakgrunder för läsning, välmåendevarumärken, portföljer och allt som ska kännas stilla. Salvia och sten, till exempel, rör sig bara en kort sträcka runt hjulet och tappar lite ljushet på vägen, vilket läses som skugga på en vägg snarare än en färgeffekt.

- Havsglas: `linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 50%, #80cbc4 100%)`
- Morgondimma: `linear-gradient(180deg, #f1f5f9 0%, #cbd5e1 100%)`
- Salvia och sten: `linear-gradient(135deg, #e7e5d8 0%, #b5c4a8 50%, #7d9275 100%)`
- Lavendelskymning: `linear-gradient(160deg, #ede9fe 0%, #c4b5fd 55%, #a78bfa 100%)`
- Stilla vatten: `linear-gradient(180deg, #dbeafe 0%, #93c5fd 60%, #60a5fa 100%)`
- Sandbank: `linear-gradient(135deg, #fdf6e3 0%, #f3e1c1 50%, #d9b99b 100%)`
- Eukalyptus: `linear-gradient(135deg, #d8e8e0 0%, #9fc2b0 50%, #5f8f7b 100%)`
- Skifferblå: `linear-gradient(160deg, #cbd5e1 0%, #94a3b8 55%, #64748b 100%)`
- Havremjölk: `linear-gradient(180deg, #faf7f2 0%, #eee4d4 100%)`
- Månsten: `linear-gradient(135deg, #eef2ff 0%, #e0e7ff 50%, #c7d2fe 100%)`

Lugna: en nyansfamilj, små steg i ljushet. De bär mörk text lätt.

## Djärva gradientkombinationer

Djärva gradienter använder mättade färger och större avstånd runt hjulet. De fångar uppmärksamheten i ett fullt flöde, på en reabanner eller en lanseringssida. Knepet är att välja par vars raka övergång förblir stark. Magenta till bärnsten går genom korall; kobolt till korall går genom lila. Ingen av dem kommer nära grått, vilket är varför de ser levande ut hela vägen.

- Elektrisk violett: `linear-gradient(135deg, #4f46e5 0%, #9333ea 50%, #db2777 100%)`
- Het citrus: `linear-gradient(135deg, #f97316 0%, #facc15 100%)`
- Tropisk punch: `linear-gradient(135deg, #ec4899 0%, #f97316 100%)`
- Signal: `linear-gradient(90deg, #dc2626 0%, #f97316 50%, #facc15 100%)`
- Ultramarinblixt: `linear-gradient(135deg, #1d4ed8 0%, #06b6d4 100%)`
- Magenta till bärnsten: `linear-gradient(135deg, #c026d3 0%, #f59e0b 100%)`
- Djungel: `linear-gradient(135deg, #15803d 0%, #84cc16 100%)`
- Kobolt och korall: `linear-gradient(135deg, #2563eb 0%, #f43f5e 100%)`
- Druvläsk: `linear-gradient(135deg, #7e22ce 0%, #e879f9 100%)`
- Lime och turkos: `linear-gradient(135deg, #0d9488 0%, #a3e635 100%)`

Djärva: hög mättnad, par valda så att mittpunkten förblir stark. Använd vit text på den mörkare änden.

## Varma gradientkombinationer

Varma gradienter bor mellan rött och gult och känns soliga, aptitretande och mänskliga. De passar mat, restaurang- och hotellbranschen, livsstil och allt personligt. De flesta av dem lägger till en mörkare, rödare ände så att övergången får tyngd: Gyllene timmen går från blek honung till bränd bärnsten på samma sätt som sent ljus rör sig nedför en vägg. För temperaturens psykologi, se [varma och kalla färger](https://gradiently.design/sv/guide/warm-and-cool-colors).

- Gyllene timmen: `linear-gradient(180deg, #fde68a 0%, #f59e0b 55%, #b45309 100%)`
- Terrakotta: `linear-gradient(135deg, #fed7aa 0%, #ea580c 60%, #9a3412 100%)`
- Persikosorbet: `linear-gradient(135deg, #ffedd5 0%, #fdba74 50%, #fb7185 100%)`
- Glöd: `linear-gradient(180deg, #fbbf24 0%, #dc2626 55%, #450a0a 100%)`
- Ökenros: `linear-gradient(135deg, #f5d0c5 0%, #d4938b 50%, #a15c5c 100%)`
- Honung: `linear-gradient(135deg, #fef3c7 0%, #fcd34d 50%, #d97706 100%)`
- Kanel: `linear-gradient(135deg, #f5d0a9 0%, #c2703d 55%, #7c3a1d 100%)`
- Solnedgångsremsa: `linear-gradient(180deg, #fde047 0%, #fb923c 35%, #e11d48 70%, #7e22ce 100%)`
- Aprikos och plommon: `linear-gradient(135deg, #fdba74 0%, #9d174d 100%)`
- Tegel och guld: `linear-gradient(135deg, #991b1b 0%, #f59e0b 100%)`

Varma: grannar i rött, orange och gult, oftast med en mörkare ände för djup. Fler finns i [solnedgångsgradienter](https://gradiently.design/sv/guide/sunset-gradient).

## Svala gradientkombinationer

Svala gradienter ligger mellan grönt och violett och känns rena, lugna och precisa. De är det naturliga hemmet för teknik, hälsa, finans och vatten. Blått är ankaret i de flesta av dem, vilket är varför de ser pålitliga ut, och varför en sval gradient behöver en särpräglad detalj, som en violett ände eller ett turkost skifte, för att inte se ut som alla banker. Fler blå finns samlade i [blå gradienter](https://gradiently.design/sv/guide/blue-gradient).

- Glaciär: `linear-gradient(180deg, #ecfeff 0%, #a5f3fc 50%, #22d3ee 100%)`
- Djup lagun: `linear-gradient(135deg, #06b6d4 0%, #0e7490 55%, #164e63 100%)`
- Nordisk: `linear-gradient(135deg, #e2e8f0 0%, #93c5fd 50%, #3b82f6 100%)`
- Indigonatt: `linear-gradient(180deg, #6366f1 0%, #312e81 100%)`
- Mynta till himmel: `linear-gradient(135deg, #6ee7b7 0%, #38bdf8 100%)`
- Blåklocka: `linear-gradient(135deg, #c7d2fe 0%, #818cf8 100%)`
- Arktisk turkos: `linear-gradient(135deg, #99f6e4 0%, #14b8a6 50%, #115e59 100%)`
- Blå timmen: `linear-gradient(180deg, #1e3a8a 0%, #6366f1 55%, #c4b5fd 100%)`
- Isviolett: `linear-gradient(135deg, #e0e7ff 0%, #a78bfa 100%)`
- Havsdjup: `linear-gradient(180deg, #22d3ee 0%, #1d4ed8 55%, #172554 100%)`

Svala: grannar i grönt, turkost, blått och violett. Ett litet nyansskifte får dem att kännas mindre företagsmässiga.

## Mörka gradientkombinationer

Mörka gradienter är nästan svarta bottnar med en upplyst färg som stiger upp ur dem. De känns premium, nattliga och filmiska, och de får vit text att se skarp ut. Håll den mörka änden lätt färgad snarare än rent svart, så att övergången har något att färdas genom. Mörka skalor bandar lätt, så lägg till korn innan du publicerar; se [mörka gradientbakgrunder](https://gradiently.design/sv/guide/dark-gradient-backgrounds).

- Midnattsviolett: `linear-gradient(135deg, #0f0b1e 0%, #3b1d6e 55%, #7c3aed 100%)`
- Djuphav: `linear-gradient(180deg, #020617 0%, #0c4a6e 60%, #0e7490 100%)`
- Skogsbotten: `linear-gradient(160deg, #052e16 0%, #14532d 55%, #3f6212 100%)`
- Oxblod: `linear-gradient(135deg, #1c0508 0%, #7f1d1d 60%, #b91c1c 100%)`
- Grafit: `linear-gradient(180deg, #0a0a0a 0%, #262626 60%, #404040 100%)`
- Bläck och glöd: `linear-gradient(160deg, #0c0a09 0%, #292524 60%, #c2410c 100%)`
- Petrolblå: `linear-gradient(135deg, #021a1f 0%, #0f4c5c 55%, #2a9d8f 100%)`
- Aubergine: `linear-gradient(135deg, #1a0b1f 0%, #4a1942 55%, #86198f 100%)`
- Nattturkos: `linear-gradient(180deg, #031716 0%, #0f3d3e 60%, #14b8a6 100%)`
- Mörkt körsbär: `linear-gradient(160deg, #0f0306 0%, #4c0519 55%, #be123c 100%)`

Mörka: ett färgat nästan svart, en djup mitt och en upplyst färg längst bort.

## Pastellgradientkombinationer

Pasteller är bleka färger med hög ljushet och lite mättnad. De känns friska, mjuka och vänliga, och de passar skönhet, bebis, pappersvaror och vårkampanjer. Eftersom de alla är så ljusa kan även avlägsna pastellnyanser blandas till en vitaktig grå, så de två sista här går via en blek lila. Sätt text på pasteller i mörkt bläck snarare än vitt. Det finns mer i [pastellgradienter](https://gradiently.design/sv/guide/pastel-gradients).

- Sockervadd: `linear-gradient(135deg, #fbcfe8 0%, #c4b5fd 50%, #a5f3fc 100%)`
- Persika och lila: `linear-gradient(135deg, #fed7aa 0%, #ddd6fe 100%)`
- Pistage: `linear-gradient(135deg, #ecfccb 0%, #bbf7d0 100%)`
- Babyblå: `linear-gradient(180deg, #e0f2fe 0%, #bae6fd 100%)`
- Citron och rodnad: `linear-gradient(135deg, #fef9c3 0%, #fecdd3 100%)`
- Mynta och grädde: `linear-gradient(135deg, #d1fae5 0%, #fef3c7 100%)`
- Pudervioletta: `linear-gradient(135deg, #f5f3ff 0%, #ddd6fe 50%, #c4b5fd 100%)`
- Sorbet: `linear-gradient(90deg, #fecaca 0%, #fed7aa 50%, #fef08a 100%)`
- Havsskum och ros: `linear-gradient(135deg, #ccfbf1 0%, #e9d5ff 50%, #fbcfe8 100%)`
- Morgonhimmel: `linear-gradient(180deg, #bae6fd 0%, #e9d5ff 50%, #fde2c4 100%)`

Pastell: bleka grannar, eller avlägsna pasteller överbryggade av lila så att mitten förblir färgad.

## Så använder du de här gradientkoderna

Varje kod är ett komplett CSS-värde för `background`. Klistra in den på vilket element som helst, eller läs in hexfärgerna och stoppens positioner i ett designverktyg. På webben anger du en solid reservfärg först, hämtad från det mörkaste eller viktigaste stoppet.

```css
.card {
  background-color: #3b1d6e; /* fallback */
  background-image: linear-gradient(135deg, #0f0b1e 0%, #3b1d6e 55%, #7c3aed 100%);
  color: #ffffff;
}
```

Midnattsviolett på ett kort, med en reservfärg och vit text.

## Så gör du din egen kombination

1. **Välj stämningen först** Bestäm lugn eller djärv, varm eller sval, mörk eller ljus innan någon färg. Det smalnar av valen till en av grupperna ovan.
2. **Välj en ankarfärg** Oftast din varumärkesfärg eller färgen på det du säljer. Se [hur du väljer varumärkesfärger](https://gradiently.design/sv/guide/how-to-choose-brand-colors).
3. **Lägg till en granne** Gå 30 till 60 grader runt färghjulet för en ren andra färg. Ändra ljusheten lite också, för djupets skull.
4. **Överbrygga allt avlägset** Om du vill ha en nyans långt bort, lägg en stark mellanfärg emellan så att övergången inte blir grå. Se [grumliga gradienter](https://gradiently.design/sv/guide/muddy-gradients).
5. **Gör den till din** Ändra vinkeln, flytta ett stopp från 50 %, lägg till en tredje färg eller ett lager korn. Små ändringar är det som hindrar en kombination från att se ut som en förinställning.

En populär kod är en bra start, men tusentals andra designer börjar där också. Om du vill ha en gradientidentitet som ingen annan har kan du matcha en bild du älskar mot dess palett och de närmaste Marks, eller göra nya som liknar den.

## FAQ

### Vilka färger passar bra ihop i en gradient?

Färger som ligger bredvid varandra på färghjulet, som blått och violett eller orange och rosa, blandas alltid rent. Avlägsna färger fungerar när en stark mellanfärg överbryggar dem.

### Vilken är den populäraste gradientkombinationen?

Violett till rosa och blått till cyan hör till de mest använda. Den populariteten är också varför de sällan ser särpräglade ut.

### Hur många färger ska en gradient ha?

Två är enklast, tre ger djup och kontroll över mittpunkten, och fler än fem är svåra att hålla rena.

### Vilken textfärg fungerar på en gradient?

Vit eller nästan vit på mörka och djärva gradienter, och ett mörkt bläck på pastell och lugna. Kontrollera kontrasten vid den ljusaste punkten bakom texten.

### Kan jag använda de här gradientkoderna i Figma eller Canva?

Ja. Kopiera hexfärgerna och deras stopppositioner till verktygets gradientfyllning och matcha vinkeln.