# 80-talsestetik: neon, krom och solnedgångsgradienter

[Canonical HTML page](https://gradiently.design/sv/guide/80s-aesthetic)

Neonrör, kromad text, en randig sol som sjunker ner i ett glödande rutnät. 80-talslooken har återuppstått så ofta att den fått en egen musikgenre. Så bygger du den, med koder.

## The short version

- 80-talsestetiken byggs av neonfärger på mörka underlag, kromad text, solnedgångsgradienter, perspektivrutnät och pastellfärger från Miami.
- Mycket av det som idag kallas 80-talsestetik har gått genom synthwave, en musik- och bildstil som från 2000-talet och framåt återuppväckte 1980-talets film-, arkad- och synthkultur.
- En solnedgångsgradient som går från gult via orange och rosa till violett, ofta skuren i vågräta band, är den mest igenkännliga 80-talsbakgrunden.
- Kromad text härmar polerad metall med en skarp horisontlinje tvärs över bokstävernas mitt, där en ljus himmelsspegling möter en mörk markspegling.
- Neon fungerar bäst som linjer och former på ett mörkt underlag; håll glöden borta från brödtext så att den förblir läsbar.

**80-talsestetiken** är neon på svart, kromad text, solnedgångsgradienter skurna i band och ett glödande rutnät som löper mot horisonten, med en mjukare sida av Miami-pastell och Memphis-mönster. Det mesta av dagens version kommer via synthwave, en stil som från 2000-talet och framåt återuppväckte 1980-talets filmer, arkadspel och synthmusik. Nedan går vi igenom de viktigaste ingredienserna, paletter med koder, CSS för en solnedgång och ett rutnät, och hur du använder stilen utan att den blir till en utklädnad.

## 80-talsestetikens ingredienser

| Ingrediens | Varifrån den kommer | Använd den till |
| --- | --- | --- |
| Neonrosa och cyan | Skyltar, nattklubbar, arkadspel | Linjer, former och accenter på mörka underlag |
| Solnedgångsgradienter | Skivomslag, filmaffischer, semestergrafik | Bakgrunder och en randig sol |
| Kromad text | Logotyper för filmer, bilar och elektronik | Rubriker på ett eller två ord |
| Perspektivrutnät | Tidig datorgrafik och arkadspel | Scenens golv, en avdelare mellan sektioner |
| Miami-pastell | Art deco-hotell och decenniets tv | Ljusare, soligare versioner av looken |
| Memphis-former | Den milanesiska designgruppen i början av 80-talet | Lekfulla mönster och konfetti |
| VHS-textur | Hemvideo | Radlinjer och korn över bilder |

Sju ingredienser. Två eller tre av dem ger en trovärdig 80-talsdesign; alla sju ger en temafest.

## 80-talsestetik och synthwave

Synthwave, ibland kallad outrun efter Segas arkadbilspel från 1986, är en musikgenre som växte fram på nätet från mitten av 2000-talet och lånar mycket från 80-talets filmmusik. Dess omslagskonst formade den look många nu ser framför sig: en mörkt violett himmel, en randig sol, ett magentafärgat rutnät och kromad text. Filmen *Drive* från 2011 och dess soundtrack hjälpte stilen att nå en bredare publik.

Så när en brief säger 80-tal, fråga vilket 80-tal. Synthwave-natten, Miami-pastellen på dagen och Memphis-mönstren är tre olika looks. [Synthwave-färger](https://gradiently.design/sv/guide/synthwave-colors) och [vaporwave-färger](https://gradiently.design/sv/guide/vaporwave-colors) går djupare in på de två internetväckelserna, och [Memphis-design](https://gradiently.design/sv/guide/memphis-design) tar upp mönstersidan.

## Färgpaletter från 80-talet

- Midnatt: #0b0221
- Djupviolett: #2b0a4a
- Neonmagenta: #ff2fd0
- Lasercyan: #00f0ff
- Solgult: #ffd319

Neonnatt. Nästan hela ytan är midnatt och violett; neonfärgerna är linjer, det gula är solen.

- Flamingo: #ff9ecd
- Pool: #7fe7dc
- Persika: #ffd1a9
- Stuck: #fdf7f2
- Nattext: #2d1e4a

Miami på dagen. Pasteller på ett varmt vitt, med en djup violett för text så att den förblir läsbar.

- Outrun-solnedgång: `linear-gradient(180deg, #ffd319 0%, #ff901f 30%, #ff2975 60%, #8c1eff 100%)`
- Skuren sol: `linear-gradient(180deg, #ffd319 0% 45%, #1a0533 45% 48%, #ff901f 48% 62%, #1a0533 62% 66%, #ff2975 66% 80%, #1a0533 80% 85%, #c2185b 85% 100%)`
- Krom: `linear-gradient(180deg, #f4f8ff 0%, #9fb3d1 49%, #1b2a4a 50%, #4a5b7c 62%, #e6edf7 100%)`
- Neonhorisont: `radial-gradient(circle at 50% 110%, #ff2fd0 0%, #6a0dad 35%, #0b0221 75%)`
- Miami-pastell: `linear-gradient(135deg, #ff9ecd 0%, #ffd1a9 50%, #7fe7dc 100%)`
- Laserlinjer: `repeating-linear-gradient(90deg, #0b0221 0 38px, #00f0ff 38px 40px)`

Sex 80-talsgradienter att kopiera. Den skurna solen använder hårda stopp för att dra mörka band genom den nedre halvan, den klassiska synthwave-solen.

Kromgradienten är den som är värd att studera. Polerad metall speglar en ljus himmel över en mörk mark, så färgen går från ljus, fördjupas mot mitten, slår om till mörkt vid en skarp horisontlinje och ljusnar sedan igen mot botten. Den hårda linjen är det som får den att läsas som metall och inte som grått. [Kromeffekter för text](https://gradiently.design/sv/guide/chrome-effect) visar hur du använder den på bokstäver, och [solnedgångsgradienter](https://gradiently.design/sv/guide/sunset-gradient) har mjukare versioner av himlen.

## Bygg en 80-talssolnedgång och ett rutnät i CSS

```css
.scene {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(180deg, #0b0221 0%, #2b0a4a 55%, #0b0221 55%);
}

.sun {
  position: absolute;
  left: 50%;
  top: 18%;
  width: min(40vw, 320px);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd319 0%, #ff901f 45%, #ff2975 80%);
  /* slice the lower half into bands */
  mask-image: linear-gradient(180deg, #000 0 58%, transparent 58% 61%, #000 61% 70%, transparent 70% 74%, #000 74% 83%, transparent 83% 88%, #000 88%);
}

.floor {
  position: absolute;
  left: -50%;
  right: -50%;
  top: 55%;
  bottom: -20%;
  background-image:
    linear-gradient(#ff2fd0 2px, transparent 2px),
    linear-gradient(90deg, #ff2fd0 2px, transparent 2px);
  background-size: 60px 60px;
  transform: perspective(320px) rotateX(62deg);
  transform-origin: top center;
}
```

En violett himmel, en randig sol och ett magentafärgat rutnätsgolv lutat i perspektiv. Placera `.sun` och `.floor` inuti `.scene`.

För att animera det flyttar du golvets `background-position` nedåt i en loop, så ser det ut som att rutnätet rusar mot dig. Ta hänsyn till inställningen för minskad rörelse när du gör det; [animerade CSS-gradienter](https://gradiently.design/sv/guide/css-animated-gradient) går igenom mönstret.

## 80-talstypsnitt och bokstäver

Typografin gjorde mycket av jobbet i decenniets grafik. Filmtitlar och produktlogotyper använde tunga kursiva för fart, kromade eller extruderade versaler för dramatik och lösa penselskriftstilar till allt som utspelade sig på en strand. Ett enda ord som behandlas så kan bära en hel design.

- **Tunga kursiva sans serif-typsnitt** antyder rörelse, perfekt för allt sportigt eller snabbt.
- **Kromade versaler** fungerar för högst ett eller två ord; längre rader förlorar reflektionen.
- **Penselskriftstilar** passar ihop med Miami-paletten, satta små bredvid en kraftig sans.
- **Pixel- och rutnätstypsnitt** nickar åt arkadspel men läses dåligt under en större storlek, så spara dem till titlar.

För typsnittsfamiljer att prova listar [retrotypsnitt](https://gradiently.design/sv/guide/retro-fonts) alternativ efter decennium.

## Så använder du 80-talsestetiken utan klichéer

### Kliché

- Sol, rutnät, palmer, krom och VHS på en gång
- Neonglöd kring varje textrad
- En skriftstil, ett kromtypsnitt och ett pixeltypsnitt tillsammans
- Retro för sakens skull, utan koppling till varumärket

### Genomtänkt

- En huvudingrediens, till exempel den skurna solen
- Neon på linjer och former, skarp text på lugna ytor
- Ett displaytypsnitt för rubriken, en enkel sans för detaljerna
- Ett skäl: en retroprodukt, ett jubileum, en musikkväll

Om du designar i Gradiently ger behandlingarna Extrudering och Spår för Lettering en rubrik djupet och farten hos ett 80-talstitelkort, och en mörk Mark med violett och magenta ljus blir nattens himmel för den, med sitt lugnaste område bakom orden så att texten förblir skarp.

En stående klubbaffisch med texten Synthkväll över en mörkviolett och magenta bakgrund

En affisch för en 80-talskväll: mörkt underlag, en kraftig rubrik, detaljer små och enkla.

En liggande YouTube-miniatyr med texten Tillbaka till 1986 och ett avsnittsnummer ovanför

En YouTube-miniatyr i 1280×720 med en kort, kraftig titel som läses i liten storlek.

Looken passar musikkvällar, spelkanaler, retroprodukter som lanseras, jubileer och allt som vill ha en blinkning av nostalgi. Vill du ha decenniet efter, läs [90-talsestetik](https://gradiently.design/sv/guide/90s-aesthetic).

## FAQ

### Vad är 80-talsestetik?

En visuell stil byggd av neonfärger på mörka underlag, kromad text, solnedgångsgradienter, perspektivrutnät, Miami-pasteller och Memphis-mönster.

### Vilka färger ingår i en 80-talspalett?

Neonmagenta, lasercyan och solgult på midnatt och djupviolett för nattlooken, eller flamingorosa, poolturkos och persika för Miami-looken.

### Vad är skillnaden mellan 80-talsestetik och synthwave?

80-talsestetiken är decenniets egen design. Synthwave är en senare musik- och bildstil som återuppväcker den, och dess omslagskonst formade den neonfärgade solnedgången och rutnätslooken som många nu ser framför sig.

### Hur gör jag en 80-talssolnedgång i CSS?

Använd en lodrät linjär gradient från gult via orange och rosa till violett, och lägg till hårda stopp eller en mask för att skära mörka band genom den nedre halvan.

### Vilka typsnitt ser ut som 80-tal?

Kromade eller extruderade displaybokstäver, penselskriftstilar och tunga kursiva sans serif-typsnitt. Använd ett till rubriken och en enkel sans till allt annat.