# 80-tallsestetikk: neon, krom og solnedgangsgradienter

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

Neonrør, kromtekst, en stripete sol som synker ned i et glødende rutenett. 80-tallsstilen er gjenopplivet så mange ganger at den har fått sin egen musikksjanger. Slik bygger du den, med koder.

## The short version

- 80-tallsestetikken er bygget av neonfarger på mørk bakgrunn, kromtekst, solnedgangsgradienter, perspektivrutenett og pastelltoner fra Miami.
- Mye av det folk i dag kaller 80-tallsestetikk er filtrert gjennom synthwave, en musikk- og bildestil som fra 2000-tallet gjenopplivet film, arkadespill og synthesizerkultur fra 1980-tallet.
- En solnedgangsgradient som går fra gult via oransje og rosa til fiolett, ofte delt opp i vannrette bånd, er den mest gjenkjennelige 80-tallsbakgrunnen av alle.
- Kromtekst etterligner polert metall med en skarp horisontlinje midt gjennom bokstavene, der en lys himmelrefleks møter en mørk bakkerefleks.
- Neon fungerer best som linjer og former på mørk bakgrunn; hold gløden unna brødteksten så den forblir lesbar.

**80-tallsestetikken** er neon på svart, kromtekst, solnedgangsgradienter delt opp i bånd og et glødende rutenett som strekker seg mot horisonten, med en mykere side av Miami-pasteller og Memphis-mønstre. Det meste av dagens versjon kommer via synthwave, en stil som fra 2000-tallet gjenopplivet film, arkadespill og synthesizermusikk fra 1980-tallet. Under finner du de viktigste ingrediensene, paletter med koder, CSS for en solnedgang og et rutenett, og hvordan du bruker stilen uten at det blir kostymefest.

## Ingrediensene i 80-tallsestetikken

| Ingrediens | Hvor den kommer fra | Bruk den til |
| --- | --- | --- |
| Neonrosa og cyan | Skilt, nattklubber, arkadeautomater | Linjer, former og aksenter på mørk bakgrunn |
| Solnedgangsgradienter | Platecovere, filmplakater, feriegrafikk | Bakgrunner og en stripete sol |
| Kromtekst | Logoer for filmer, biler og elektronikk | Overskrifter på ett eller to ord |
| Perspektivrutenett | Tidlig datagrafikk og arkadespill | Gulvet i en scene, en seksjonsdeler |
| Miami-pasteller | Art deco-hoteller og tiårets TV | Lysere, solrikere versjoner av stilen |
| Memphis-former | Designkollektivet i Milano tidlig på 80-tallet | Lekne mønstre og konfetti |
| VHS-tekstur | Hjemmevideo | Skannelinjer og korn over bilder |

Sju ingredienser. To eller tre av dem gir et overbevisende 80-tallsdesign; alle sju gir en temafest.

## 80-tallsestetikk og synthwave

Synthwave, noen ganger kalt outrun etter Segas bilspill for arkadehaller fra 1986, er en musikksjanger som vokste frem på nettet fra midten av 2000-tallet og låner tungt fra filmmusikk fra 80-tallet. Omslagene definerte stilen mange ser for seg i dag: en mørk fiolett himmel, en stripete sol, et magenta rutenett og kromtekst. Filmen *Drive* fra 2011 og lydsporet bidro til å bringe stilen ut til et bredt publikum.

Så når en brief sier 80-tall, spør hvilket 80-tall. Synthwave-natten, Miami-pastellene på dagtid og Memphis-mønstrene er tre forskjellige uttrykk. [Synthwave-farger](https://gradiently.design/nb/guide/synthwave-colors) og [vaporwave-farger](https://gradiently.design/nb/guide/vaporwave-colors) går dypere inn i de to internettgjenopplivingene, og [Memphis-design](https://gradiently.design/nb/guide/memphis-design) dekker mønstersiden.

## Fargepaletter fra 80-tallet

- Midnatt: #0b0221
- Dyp fiolett: #2b0a4a
- Neonmagenta: #ff2fd0
- Lasercyan: #00f0ff
- Solgul: #ffd319

Neonnatt. Nesten hele flaten er midnatt og fiolett; neonfargene er linjer, og det gule er solen.

- Flamingo: #ff9ecd
- Basseng: #7fe7dc
- Fersken: #ffd1a9
- Stukk: #fdf7f2
- Nattekst: #2d1e4a

Miami på dagtid. Pasteller på en varm hvit, med en dyp fiolett til teksten så den forblir lesbar.

- Outrun-solnedgang: `linear-gradient(180deg, #ffd319 0%, #ff901f 30%, #ff2975 60%, #8c1eff 100%)`
- Oppdelt 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)`

Seks 80-tallsgradienter å kopiere. Den oppdelte solen bruker harde stopp til å skjære mørke bånd gjennom den nedre halvdelen, den klassiske synthwave-solen.

Det er kromgradienten som er verdt å studere. Polert metall speiler en lys himmel over en mørk bakke, så fargen starter lyst, blir dypere mot midten, slår brått over i mørkt ved en skarp horisontlinje og lysner igjen mot bunnen. Den harde linjen er det som får den til å se ut som metall og ikke som grått. [Kromeffekter på tekst](https://gradiently.design/nb/guide/chrome-effect) viser hvordan du bruker den på bokstaver, og [solnedgangsgradienter](https://gradiently.design/nb/guide/sunset-gradient) har mykere versjoner av himmelen.

## Bygg en 80-tallssolnedgang og et rutenett 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 fiolett himmel, en stripete sol og et magenta rutenettgulv vippet inn i perspektiv. Plasser `.sun` og `.floor` inne i `.scene`.

For å animere det flytter du gulvets `background-position` nedover i en løkke, så ser det ut som rutenettet suser mot deg. Respekter innstillinger for redusert bevegelse når du gjør det; [animerte CSS-gradienter](https://gradiently.design/nb/guide/css-animated-gradient) dekker mønsteret.

## 80-tallsskrifter og bokstaver

Typografien gjorde mye av jobben i tiårets grafikk. Filmtitler og produktlogoer brukte tunge kursiver for fart, krom eller ekstruderte versaler for dramatikk og løse penselskrifter til alt som foregikk på en strand. Ett enkelt ord behandlet slik kan bære et helt design.

- **Tunge kursive sans serif-skrifter** antyder bevegelse, perfekt til alt som er sporty eller raskt.
- **Kromversaler** fungerer for høyst ett eller to ord; lengre linjer mister refleksen.
- **Penselskrifter** passer med Miami-paletten, satt lite ved siden av en kraftig sans.
- **Piksel- og rutenettskrifter** nikker til arkadehallene, men leses dårlig under en stor størrelse, så hold dem til titler.

Vil du ha skriftfamilier å prøve, lister [retroskrifter](https://gradiently.design/nb/guide/retro-fonts) opp alternativer tiår for tiår.

## Slik bruker du 80-tallsestetikken uten klisjeer

### Klisjé

- Sol, rutenett, palmer, krom og VHS på én gang
- Neonglød rundt hver tekstlinje
- En penselskrift, en kromskrift og en pikselskrift sammen
- Retro for retroens skyld, uten kobling til merkevaren

### Gjennomtenkt

- Én hovedingrediens, for eksempel den oppdelte solen
- Neon på linjer og former, skarp tekst på rolige flater
- Én displayskrift til overskriften, en enkel sans til detaljene
- En grunn: et retroprodukt, et jubileum, en musikkveld

Designer du i Gradiently, gir bokstavbehandlingene Uttrekk og Spor en overskrift dybden og farten fra et tittelkort fra 80-tallet, og en mørk Mark med fiolett og magenta lys blir nattehimmelen bak, med sitt roligste område bak ordene så teksten holder seg skarp.

En stående plakat for en klubbkveld med teksten Synthkveld over en mørk fiolett og magenta bakgrunn

En plakat til en 80-tallskveld: mørk bakgrunn, én kraftig overskrift, detaljene små og enkle.

Et liggende YouTube-miniatyrbilde med teksten Tilbake til 1986 og et episodenummer over

Et YouTube-miniatyrbilde på 1280×720 med en kort, tung tittel som leses i liten størrelse.

Stilen passer musikkvelder, spillkanaler, lanseringer av retroprodukter, jubileer og alt som vil ha et nostalgisk blunk. Vil du ha tiåret etter, les [90-tallsestetikk](https://gradiently.design/nb/guide/90s-aesthetic).

## FAQ

### Hva er 80-tallsestetikk?

En visuell stil bygget av neonfarger på mørk bakgrunn, kromtekst, solnedgangsgradienter, perspektivrutenett, Miami-pasteller og Memphis-mønstre.

### Hvilke farger hører hjemme i en 80-tallspalett?

Neonmagenta, lasercyan og solgul på midnatt og dyp fiolett for nattuttrykket, eller flamingorosa, bassengturkis og fersken for Miami-uttrykket.

### Hva er forskjellen på 80-tallsestetikk og synthwave?

80-tallsestetikken er tiårets eget design. Synthwave er en senere musikk- og kunststil som gjenoppliver det, og omslagene formet det neonsolnedgang- og rutenettuttrykket mange ser for seg i dag.

### Hvordan lager jeg en 80-tallssolnedgang i CSS?

Bruk en loddrett lineær gradient fra gult via oransje og rosa til fiolett, og legg til harde stopp eller en maske som skjærer mørke bånd gjennom den nedre halvdelen.

### Hvilke skrifter ser 80-talls ut?

Krom eller ekstruderte displaybokstaver, penselskrifter og tunge kursive sans serif-skrifter. Bruk én til overskriften og en enkel sans til alt annet.