# Retrogradienter: från 70-talets solnedgångar till 90-talets skärmar

[Canonical HTML page](https://gradiently.design/sv/guide/retro-gradients)

Senapsgula och rostbruna ränder, neon på svart, turkos och lila och titelradsblått. Tre decennier av retrogradienter med koder, och de små ändringarna som får dem att kännas nya.

## The short version

- En retrogradient är en färgövergång som frammanar ett särskilt decennium, oftast sjuttiotalets varma ränder, åttiotalets neon eller nittiotalets turkos och lila.
- Sjuttiotalsgradienter använder senap, bränd orange, rost och chokladbrunt, ofta som skarpkantade ränder på grädde.
- Åttiotalsgradienter delas i två looks: neonrosa och cyan på svart, och ljus pastellpop i rosa, turkos, gult och lila.
- Nittiotalsgradienter omfattar övergångar från turkos till lila, djupa juvelfärger och gradienten från marinblått till blått i gamla skrivbordsfönsters titelrader.
- För att modernisera en retrogradient, mjuka upp randkanterna, sänk mättnaden något, blanda i OKLCH och lägg till fint korn.

En **retrogradient** är en färgövergång som genast frammanar ett decennium. Sjuttiotalet hade varma ränder i senap, orange, rost och brunt. Åttiotalet hade neonrosa och cyan på svart, och ljus pastellpop. Nittiotalet hade turkos och lila, djupa juvelfärger och de marinblå till blå fälten i tidig skrivbordsprogramvara. Nedan finns en palett och en uppsättning gradienter att kopiera för varje decennium, sedan en metod för att modernisera dem så att de känns som en referens, inte en utklädnad.

Retro fungerar eftersom färg bär minnen. Människor känner igen ett decennium på dess palett långt innan de lägger märke till typsnittet eller layouten, vilket gör de här gradienterna till en genväg till en stämning. För den längre berättelsen om hur gradienter har rört sig genom designen, läs [gradienternas historia](https://gradiently.design/sv/guide/history-of-gradients).

## Sjuttiotalsgradienter: solnedgångsränder i orange och brunt

Sjuttiotalets palett är varm och jordnära: skördegult, bränd orange, rost och ett djupt chokladbrunt, med avokadogrönt som udda och grädde som botten. Dess signatur är randen: fyra eller fem band av färg staplade som en solnedgång, med hårda kanter snarare än en jämn övergång.

- Grädde: #f2e2c4
- Skördegult: #e0a526
- Bränd orange: #d9661f
- Rost: #a8431f
- Choklad: #4a2c1d
- Avokado: #7d7b35

En sjuttiotalspalett. Allt lutar åt varmt, även det gröna.

Sjuttiotalets solnedgångsränder: `linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%)`

Hårda färgstopp gör ränder: varje färg börjar exakt där den förra slutar. Det här är den mest igenkännbara retrogradienten av alla.

Jämna övergångar av samma färger känns mjukare och passar foton eller lång text bättre än ränder. Håll dem i den varma familjen så blir de aldrig grumliga, eftersom varje steg är en nära granne till det förra. För mjukare varma himlar, se [solnedgångsgradienter](https://gradiently.design/sv/guide/sunset-gradient).

- Skördesolnedgång: `linear-gradient(180deg, #e0a526 0%, #d9661f 50%, #a8431f 100%)`
- Avokadokök: `linear-gradient(135deg, #7d7b35 0%, #b9a44c 50%, #e9d8a6 100%)`
- Brun sammet: `radial-gradient(circle at 50% 30%, #c77d3a 0%, #6b3a1f 55%, #2e1a10 100%)`
- Gräddläsk: `linear-gradient(180deg, #f2e2c4 0%, #f0c27a 55%, #e0a526 100%)`

Jämna sjuttiotalsövergångar: guld till rost, avokado till grädde, en sammetslen brun glöd och en blek grädde till guld.

## Åttiotalsgradienter: neonnätter och pastellpop

Åttiotalet gav oss två mycket olika looks. Den ena är neonnatten: magenta och cyan som glöder på svart, kromade bokstäver och rutnät, hämtade från tidens filmer och arkadspel. Den andra är ljus, lekfull pastellpop: rosa, turkos, kanariegult och lila, ofta med svarta krumelurer och geometriska former. Vår guide om [vaporwave-färger](https://gradiently.design/sv/guide/vaporwave-colors) tar upp neonnatten på djupet, inklusive en CSS-solnedgång och ett rutnät.

- Tuggummi: #ff4f9a
- Poolturkos: #00c2c7
- Kanariegul: #ffe14d
- Lila: #b18cff
- Krumelursvart: #111111

Åttiotalets pastellpop. Svart är en del av paletten: det ramar in former och hindrar de starka färgerna från att sväva.

- Neonnatt: `linear-gradient(180deg, #0b0221 0%, #2d0b59 60%, #ff2a6d 100%)`
- Krom: `linear-gradient(180deg, #ffffff 0%, #9fb3c8 46%, #2b3a55 50%, #d6c0ff 100%)`
- Aerobics: `linear-gradient(90deg, #ff4f9a 0%, #b18cff 50%, #00c2c7 100%)`
- Popränder: `repeating-linear-gradient(45deg, #ffe14d 0 14px, #ff4f9a 14px 28px)`

Åttiotalsgradienter. Krom använder ett hårt stopp vid 46 till 50 % för att fejka en reflekterad horisont; Popränder är en upprepande gradient, så den kaklas i det oändliga.

## Nittiotalsgradienter: turkos, lila och titelradsblått

Nittiotalets färg är svalare och mer digital. Turkos fanns överallt, ofta parat med lila och magenta på sportdräkter, förpackningar och tidiga webbsidor. Skrivbordsprogramvara förde med sig gradienten från marinblått till klarblått i fönstrens titelrader, en av de första gradienter många människor såg på en skärm. Senare under decenniet kom genomskinliga turkosa plaster och, i tryck, djupare juvelfärger som jaktgrönt, vinrött och plommon.

- Titelradsblått: `linear-gradient(90deg, #000080 0%, #1084d0 100%)`
- Turkos till magenta: `linear-gradient(135deg, #0f7c80 0%, #5b2a86 60%, #c2185b 100%)`
- Genomskinlig turkos: `linear-gradient(160deg, #b8f1f0 0%, #3cc6c4 50%, #1a7f8e 100%)`
- Plommon och vinrött: `linear-gradient(160deg, #3d1f4f 0%, #800020 100%)`
- Jaktgrönt: `linear-gradient(160deg, #2f4f3a 0%, #6b7d4f 100%)`

Nittiotalsgradienter, från skärmen (titelradsblått) till hyllan (genomskinlig turkos) till sidan (juvelfärger).

Millennieskiftet är en egen historia: silver, iriserande och bubbligt. Den looken har en egen guide, [Y2K-estetiken](https://gradiently.design/sv/guide/y2k-aesthetic), och den går naturligt ihop med [holografiska gradienter](https://gradiently.design/sv/guide/holographic-gradients).

## Retrogradienter per decennium i korthet

| Decennium | Nyckelfärger | Gradientstil | Bäst för |
| --- | --- | --- | --- |
| 1970-talet | Guld, orange, rost, brunt, avokado | Hårda ränder, varma mjuka övergångar | Mat, dryck, vintagebutiker, musik |
| 1980-talets neon | Magenta, cyan, violett på svart | Glödande horisonter, krom | Nattliv, spel, synthmusik |
| 1980-talets pop | Rosa, turkos, kanariegult, lila, svart | Ljusa övergångar, ränder, former | Barn, träning, lekfulla lanseringar |
| 1990-talet | Turkos, lila, marinblått, juvelfärger | Diagonala övergångar, titelradsblått | Tech-nostalgi, streetwear, fanzines |

Välj decennium efter stämningen du vill ha, inte bara efter vilken era din publik växte upp i.

## Så moderniserar du en retrogradient

En retrogradient som kopieras exakt kan se ut som en maskeradkostym. Modern retro behåller paletten folk känner igen och ändrar finishen: mjukare kanter, något lugnare färg och en textur som känns som tryck snarare än en platt skärm.

1. **Behåll paletten, mjuka upp kanterna** Ge varje rand en kort övergång på 3 till 4 % i stället för ett hårt stopp. Den läses fortfarande som ränder, men ser tryckt ut snarare än ritad.
2. **Ta bort lite mättnad** Originalens färgprover sågs ofta i tryck eller på dunkla skärmar. Att dämpa dem något på moderna ljusa skärmar kommer närmare hur de kändes.
3. **Blanda i OKLCH** Interpolation i OKLCH håller mitten av varje övergång stark i stället för gråaktig. [CSS-gradienter i OKLCH](https://gradiently.design/sv/guide/css-gradient-oklch) förklarar hur.
4. **Lägg till fint korn** Korn ger filmens och papperets textur och döljer bandning. [Korniga gradienter](https://gradiently.design/sv/guide/grainy-gradients) har receptet.
5. **Använd modern typografi** Låt färgen bära decenniet och välj ett rent, aktuellt typsnitt. Tidstypiskt färgval plus tidstypiskt typsnitt är där det tippar över i pastisch.

```css
/* Original: hard seventies stripes */
.retro {
  background: linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%);
}

/* Modernised: softer colours, short blends, OKLCH, fine grain */
.retro-modern {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"),
    linear-gradient(180deg in oklch, #f4e6cc 0 18%, #dba84a 22% 34%, #d27a45 38% 50%, #a95a3c 54% 66%, #5a3a2a 70%);
}
```

Samma ränder två gånger. Den moderna versionen använder något lugnare färger, 4 % övergångar mellan banden, OKLCH-interpolation och ett SVG-brusskikt ovanpå.

### Daterat

- Hårda, mättade ränder direkt ur en färgkarta
- Tidstypiskt typsnitt, tidstypisk layout och tidstypisk färg på en gång
- Platt färg med synlig bandning
- Varje retrotrop i en enda design

### Modern retro

- Korta övergångar mellan banden, något lugnare färg
- Retrofärg med rent, aktuellt typsnitt
- Fint korn för en tryckt känsla
- Ett decennium, ett motiv, gott om utrymme

En A4-affisch som tillkännager en sommarrea med vintagedenim, mocka och manchester

En A4-affisch: sjuttiotalsvärme med modern, generös text.

Ett kvadratiskt spellisteomslag med titeln Låtar från kassettdäcket

Ett spellisteomslag: en stark rad låter färgen göra tidsresan.

Vill du ha en retrolook du kan behålla, beskriv den i Gradiently [Forge](/forge), till exempel ”sjuttiotalets solnedgångsränder på grädde, med korn”, så bygger den en Mark av meningen. För tryckta produkter, kontrollera [trycka gradienter](https://gradiently.design/sv/guide/print-gradients) innan du skickar filer, eftersom varma orange och bruna toner kan skifta på papper.

## FAQ

### Vilka färger får en gradient att se retro ut?

Färger som är starkt knutna till ett decennium: senap, orange, rost och brunt för sjuttiotalet, neonmagenta och cyan eller ljusa pasteller för åttiotalet, och turkos, lila och marinblått för nittiotalet.

### Hur gör jag sjuttiotalsränder i CSS?

Använd hårda färgstopp, där varje färg börjar exakt där den förra slutar, till exempel `linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%)`.

### Hur hindrar jag en retrogradient från att se daterad ut?

Behåll paletten men mjuka upp randkanterna, sänk mättnaden något, blanda i OKLCH, lägg till fint korn och para ihop den med rent, modernt typsnitt.

### Vad är skillnaden mellan retro- och vintagegradienter?

Orden används nästan synonymt. Retro betyder oftast en ny design som refererar till ett förflutet decennium, medan vintage antyder något som ser genuint åldrat ut, ofta med mer textur och blekning.

### Vilket decennium passar mitt varumärke?

Välj efter stämning: sjuttiotalet för värme och hantverk, åttiotalets neon för nattliv och energi, åttiotalets pop för lek och nittiotalet för digital nostalgi och streetwear.