# Retrogradienter: fra 70-tallets solnedganger til 90-tallets skjermer

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

Striper i sennep og rust, neon på svart, turkis og lilla og tittellinjeblått. Tre tiår med retrogradienter med koder, og de små endringene som får dem til å føles nye.

## The short version

- En retrogradient er en fargeovergang som minner om et bestemt tiår, oftest de varme stripene fra syttitallet, neonet fra åttitallet eller turkis og lilla fra nittitallet.
- Syttitallsgradienter bruker sennep, brent oransje, rust og sjokoladebrunt, ofte som striper med harde kanter på krem.
- Åttitallsgradienter deler seg i to uttrykk: neonrosa og cyan på svart, og klar pastellpop i rosa, turkis, gult og syrin.
- Nittitallsgradienter omfatter overganger fra turkis til lilla, dype juveltoner og gradienten fra marine til blått i gamle tittellinjer på skrivebordet.
- For å modernisere en retrogradient myker du opp stripekantene, senker metningen litt, blander i OKLCH og legger til fint korn.

En **retro gradient** er en fargeovergang som umiddelbart minner om et tiår. Syttitallet hadde varme striper i sennep, oransje, rust og brunt. Åttitallet hadde neonrosa og cyan på svart, og klar pastellpop. Nittitallet hadde turkis og lilla, dype juveltoner og de marine til blå linjene i tidlig skrivebordsprogramvare. Under finner du en palett og et sett med gradienter du kan kopiere for hvert tiår, og deretter en metode for å modernisere dem, så de føles som en referanse og ikke et kostyme.

Retro fungerer fordi farge bærer minner. Folk kjenner igjen et tiår på paletten lenge før de legger merke til skriften eller oppsettet, noe som gjør disse gradientene til en snarvei til en stemning. For den lengre historien om hvordan gradienter har beveget seg gjennom design, les [gradientenes historie](https://gradiently.design/nb/guide/history-of-gradients).

## Syttitallsgradienter: solnedgangsstriper i oransje og brunt

Syttitallspaletten er varm og jordnær: høstgull, brent oransje, rust og en dyp sjokoladebrun, med avokadogrønn som den som skiller seg ut, og krem som grunn. Kjennetegnet er stripen: fire eller fem fargebånd stablet som en solnedgang, med harde kanter i stedet for en jevn overgang.

- Krem: #f2e2c4
- Høstgull: #e0a526
- Brent oransje: #d9661f
- Rust: #a8431f
- Sjokolade: #4a2c1d
- Avokado: #7d7b35

En syttitallspalett. Alt heller mot det varme, også det grønne.

Solnedgangsstriper fra syttitallet: `linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%)`

Harde fargestopp lager striper: hver farge starter akkurat der den forrige slutter. Dette er den mest gjenkjennelige retrogradienten av alle.

Jevne overganger fra de samme fargene føles mykere og passer bedre til bilder eller lang tekst enn striper gjør. Hold dem i den varme familien, så blir de aldri grumsete, fordi hvert trinn er en nær nabo av det forrige. For jevnere varme himler, se [solnedgangsgradienter](https://gradiently.design/nb/guide/sunset-gradient).

- Høstsolnedgang: `linear-gradient(180deg, #e0a526 0%, #d9661f 50%, #a8431f 100%)`
- Avokadokjøkken: `linear-gradient(135deg, #7d7b35 0%, #b9a44c 50%, #e9d8a6 100%)`
- Brun fløyel: `radial-gradient(circle at 50% 30%, #c77d3a 0%, #6b3a1f 55%, #2e1a10 100%)`
- Kremsoda: `linear-gradient(180deg, #f2e2c4 0%, #f0c27a 55%, #e0a526 100%)`

Jevne syttitallsoverganger: gull til rust, avokado til krem, en fløyelsaktig brun glød og en blek krem til gull.

## Åttitallsgradienter: neonnetter og pastellpop

Åttitallet ga oss to svært ulike uttrykk. Det ene er neonnatten: magenta og cyan som gløder på svart, krombokstaver og rutenett, hentet fra filmene og arkadespillene fra den tiden. Det andre er klar, leken pastellpop: rosa, turkis, kanarigult og syrin, ofte med svarte krusedullstreker og geometriske former. Guiden vår om [vaporwave-farger](https://gradiently.design/nb/guide/vaporwave-colors) tar for seg neonnatten i dybden, inkludert en solnedgang og et rutenett i CSS.

- Tyggegummi: #ff4f9a
- Bassengturkis: #00c2c7
- Kanari: #ffe14d
- Syrin: #b18cff
- Krusedullsvart: #111111

Pastellpop fra åttitallet. Svart er en del av paletten: det tegner omriss rundt former og hindrer at de klare fargene svever.

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

Åttitallsgradienter. Krom bruker et hardt stopp ved 46 til 50 % for å etterligne en speilet horisont, og Popstripe er en repeterende gradient, så den gjentas i det uendelige.

## Nittitallsgradienter: turkis, lilla og tittellinjeblått

Nittitallets farger er kjøligere og mer digitale. Turkis var overalt, ofte sammen med lilla og magenta på idrettsdrakter, emballasje og tidlige nettsider. Skrivebordsprogramvare kom med gradienten fra marine til klar blå i vinduenes tittellinjer, en av de første gradientene mange så på en skjerm. Senere i tiåret kom gjennomskinnelig turkis plast og, i trykk, dypere juveltoner som jaktgrønn, burgunder og plomme.

- Tittellinjeblå: `linear-gradient(90deg, #000080 0%, #1084d0 100%)`
- Turkis til magenta: `linear-gradient(135deg, #0f7c80 0%, #5b2a86 60%, #c2185b 100%)`
- Gjennomskinnelig turkis: `linear-gradient(160deg, #b8f1f0 0%, #3cc6c4 50%, #1a7f8e 100%)`
- Plomme og burgunder: `linear-gradient(160deg, #3d1f4f 0%, #800020 100%)`
- Jaktgrønn: `linear-gradient(160deg, #2f4f3a 0%, #6b7d4f 100%)`

Nittitallsgradienter, fra skjermen (tittellinjeblå) til hyllen (gjennomskinnelig turkis) til siden (juveltoner).

Årtusenskiftet er en egen historie: sølv, iriserende og boblete. Det uttrykket har sin egen guide, [Y2K-estetikken](https://gradiently.design/nb/guide/y2k-aesthetic), og det passer naturlig sammen med [holografiske gradienter](https://gradiently.design/nb/guide/holographic-gradients).

## Retrogradienter etter tiår, i korte trekk

| Tiår | Nøkkelfarger | Gradientstil | Best til |
| --- | --- | --- | --- |
| 1970-tallet | Gull, oransje, rust, brunt, avokado | Harde striper, varme myke overganger | Mat, drikke, vintagebutikker, musikk |
| 1980-tallet, neon | Magenta, cyan, fiolett på svart | Glødende horisonter, krom | Uteliv, gaming, synthmusikk |
| 1980-tallet, pop | Rosa, turkis, kanari, syrin, svart | Klare overganger, striper, former | Barn, trening, lekne lanseringer |
| 1990-tallet | Turkis, lilla, marine, juveltoner | Diagonale overganger, tittellinjeblå | Teknologinostalgi, streetwear, fanziner |

Velg tiåret etter stemningen du vil ha, ikke bare etter tiden publikummet ditt vokste opp i.

## Slik moderniserer du en retrogradient

En retrogradient som er kopiert nøyaktig, kan se ut som et karnevalskostyme. Moderne retro beholder paletten folk kjenner igjen, og endrer finishen: mykere kanter, litt roligere farge og en tekstur som føles som trykk i stedet for en flat skjerm.

1. **Behold paletten, myk opp kantene** Gi hver stripe en kort overgang på 3 til 4 % i stedet for et hardt stopp. Det leses fortsatt som striper, men ser trykt ut og ikke tegnet.
2. **Ta ut litt metning** De opprinnelige fargeprøvene ble ofte sett i trykk eller på matte skjermer. Å dempe dem litt på moderne lyssterke skjermer kommer nærmere hvordan de føltes.
3. **Bland i OKLCH** Interpolering i OKLCH holder midten av hver overgang klar i stedet for gråaktig. [CSS-gradienter i OKLCH](https://gradiently.design/nb/guide/css-gradient-oklch) forklarer hvordan.
4. **Legg til fint korn** Korn gir teksturen fra film og papir og skjuler striper. [Kornete gradienter](https://gradiently.design/nb/guide/grainy-gradients) har oppskriften.
5. **Bruk moderne skrift** La fargen bære tiåret, og velg en ren, moderne skrift. Tidsriktig farge pluss tidsriktig skrift er der det tipper over i pastisj.

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

De samme stripene to ganger. Den moderne versjonen bruker litt roligere farger, overganger på 4 % mellom båndene, OKLCH-interpolering og et lag med SVG-støy på toppen.

### Utdatert

- Harde, mettede striper rett fra en fargeprøvebok
- Tidsriktig skrift, oppsett og farge på en gang
- Flat farge med synlige striper
- Hver eneste retroklisjé i ett design

### Moderne retro

- Korte overganger mellom båndene, litt roligere farge
- Retrofarger med ren, moderne skrift
- Fint korn for en trykt følelse
- Ett tiår, ett motiv, god plass

En A4-plakat som kunngjør et sommersalg av vintage denim, semsket skinn og kordfløyel

En A4-plakat: syttitallsvarme med moderne, raus skrift.

Et kvadratisk spillelistecover med tittelen Låter fra kassettspilleren

Et spillelistecover: én sterk linje lar fargen stå for tidsreisen.

Hvis du vil ha et retrouttrykk du kan beholde, beskriver du det i [Forge](/forge) i Gradiently, for eksempel «solnedgangsstriper fra syttitallet på krem, med korn», så bygger den en Mark fra setningen. For trykte ting bør du sjekke [trykking av gradienter](https://gradiently.design/nb/guide/print-gradients) før du sender filer, fordi varme oransje- og bruntoner kan forskyve seg på papir.

## FAQ

### Hvilke farger får en gradient til å se retro ut?

Farger som er sterkt knyttet til et tiår: sennep, oransje, rust og brunt for syttitallet, neonmagenta og cyan eller klare pasteller for åttitallet, og turkis, lilla og marine for nittitallet.

### Hvordan lager jeg syttitallsstriper i CSS?

Bruk harde fargestopp, der hver farge starter akkurat der den forrige slutter, for eksempel `linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%)`.

### Hvordan unngår jeg at en retrogradient ser utdatert ut?

Behold paletten, men myk opp stripekantene, senk metningen litt, bland i OKLCH, legg til fint korn og kombiner den med ren, moderne skrift.

### Hva er forskjellen på retro og vintage gradienter?

Ordene brukes nesten om hverandre. Retro betyr som regel et nytt design som viser til et tidligere tiår, mens vintage antyder noe som ser virkelig gammelt ut, ofte med mer tekstur og falming.

### Hvilket tiår passer til merkevaren min?

Velg etter stemning: syttitallet for varme og håndverk, åttitallets neon for uteliv og energi, åttitallets pop for lek, og nittitallet for digital nostalgi og streetwear.