# 80'er-æstetik: neon, krom og solnedgangsgradienter

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

Neonrør, kromskrift og en stribet sol, der synker ned i et glødende gitter. 80'er-looket er blevet genoplivet så ofte, at det har sin egen musikgenre. Sådan bygger du det, med koder.

## The short version

- 80'er-æstetik er bygget af neonfarver på mørk baggrund, kromskrift, solnedgangsgradienter, perspektivgitre og pastelfarver fra Miami.
- Meget af det, folk i dag kalder 80'er-æstetik, er filtreret gennem synthwave, en musik- og billedstil, der fra 00'erne og frem genoplivede 1980'ernes film-, arkade- og synthesizerkultur.
- En solnedgangsgradient fra gul over orange og pink til violet, ofte skåret i vandrette bånd, er den mest genkendelige 80'er-baggrund.
- Kromskrift efterligner poleret metal med en skarp horisontlinje midt gennem bogstaverne, hvor en lys himmelrefleksion møder en mørk jordrefleksion.
- Neon virker bedst som linjer og former på mørk baggrund; hold glødet væk fra brødtekst, så den forbliver læselig.

**80'er-æstetik** er neon på sort, kromskrift, solnedgangsgradienter skåret i bånd og et glødende gitter, der løber mod horisonten, med en blødere side af Miami-pasteller og Memphis-mønstre. Det meste af nutidens udgave kommer fra synthwave, en stil, der fra 00'erne og frem genoplivede 1980'ernes film, arkadespil og synthesizermusik. Herunder finder du de vigtigste ingredienser, paletter med koder, CSS til en solnedgang og et gitter og vejen til at bruge det uden at ende i udklædning.

## Ingredienserne i 80'er-æstetik

| Ingrediens | Hvor den kommer fra | Brug den til |
| --- | --- | --- |
| Neonpink og cyan | Skilte, natklubber, arkademaskiner | Linjer, former og accenter på mørk baggrund |
| Solnedgangsgradienter | Pladecovers, filmplakater, feriegrafik | Baggrunde og en stribet sol |
| Kromskrift | Logoer til film, biler og elektronik | Overskrifter på et eller to ord |
| Perspektivgitre | Tidlig computergrafik og arkadespil | Gulvet i en scene, en sektionsdeler |
| Miami-pasteller | Art deco-hoteller og årtiets tv | Lysere, solrigere udgaver af looket |
| Memphis-former | Det milanesiske designkollektiv fra begyndelsen af 80'erne | Legende mønstre og konfetti |
| VHS-tekstur | Hjemmevideo | Scanlinjer og korn over billeder |

Syv ingredienser. To eller tre af dem giver et overbevisende 80'er-design; alle syv giver en temafest.

## 80'er-æstetik og synthwave

Synthwave, nogle gange kaldet outrun efter Segas arkadespil fra 1986, er en musikgenre, der voksede frem på nettet fra midten af 00'erne og låner kraftigt fra 80'er-filmmusik. Dens billedside definerede det look, mange nu forestiller sig: en mørkviolet himmel, en stribet sol, et magenta gitter og kromskrift. Filmen *Drive* fra 2011 og dens soundtrack hjalp med at bære stilen ind i mainstream.

Så når et brief siger 80'erne, så spørg, hvilke 80'ere. Synthwave-natten, Miami-pastellens dagslys og Memphis-mønstrene er tre forskellige looks. [Synthwave-farver](https://gradiently.design/da/guide/synthwave-colors) og [vaporwave-farver](https://gradiently.design/da/guide/vaporwave-colors) går dybere i de to internetgenoplivelser, og [Memphis-design](https://gradiently.design/da/guide/memphis-design) tager mønstersiden.

## Farvepaletter i 80'er-stil

- Midnat: #0b0221
- Dyb violet: #2b0a4a
- Neonmagenta: #ff2fd0
- Lasercyan: #00f0ff
- Solgul: #ffd319

Neonnat. Næsten hele fladen er midnat og violet; neonfarverne er linjer, det gule er solen.

- Flamingo: #ff9ecd
- Pool: #7fe7dc
- Fersken: #ffd1a9
- Stuk: #fdf7f2
- Nattekst: #2d1e4a

Miami om dagen. Pasteller på varm hvid, med dyb violet til tekst, så den forbliver læselig.

- Outrun-solnedgang: `linear-gradient(180deg, #ffd319 0%, #ff901f 30%, #ff2975 60%, #8c1eff 100%)`
- Skåret 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-pastel: `linear-gradient(135deg, #ff9ecd 0%, #ffd1a9 50%, #7fe7dc 100%)`
- Laserlinjer: `repeating-linear-gradient(90deg, #0b0221 0 38px, #00f0ff 38px 40px)`

Seks 80'er-gradienter til at kopiere. Den skårne sol bruger hårde stop til at skære mørke bånd gennem den nederste halvdel, den klassiske synthwave-sol.

Kromgradienten er den, du skal studere. Poleret metal spejler en lys himmel over en mørk jord, så farven går fra lys, bliver dybere mod midten, springer til mørk ved en skarp horisontlinje og lysner igen mod bunden. Den hårde linje får det til at ligne metal og ikke gråt. [Krom-teksteffekter](https://gradiently.design/da/guide/chrome-effect) viser, hvordan du bruger den på bogstaver, og [solnedgangsgradienter](https://gradiently.design/da/guide/sunset-gradient) har blødere udgaver af himlen.

## Byg en 80'er-solnedgang og et gitter 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 violet himmel, en stribet sol og et magenta gittergulv vippet ind i perspektiv. Placer `.sun` og `.floor` inde i `.scene`.

For at animere det flytter du gulvets `background-position` nedad i et loop, og gitteret ser ud til at suse mod dig. Respekter indstillingen for reduceret bevægelse, når du gør det; [animerede CSS-gradienter](https://gradiently.design/da/guide/css-animated-gradient) gennemgår mønstret.

## 80'er-skrifttyper og bogstaver

Typografien gjorde en stor del af arbejdet i årtiets grafik. Filmtitler og produktlogoer brugte tunge kursiver for fart, kromede eller udtrukne versaler for drama og løse penselskrifter til alt, der foregik på en strand. Ét enkelt ord behandlet på den måde kan bære et helt design.

- **Tunge kursive sans-skrifttyper** antyder bevægelse, perfekt til alt sporty eller hurtigt.
- **Kromede versaler** virker til højst et eller to ord; længere linjer mister refleksionen.
- **Penselskrifter** passer til Miami-paletten, sat småt ved siden af en fed sans.
- **Pixel- og gitterskrifttyper** nikker til arkaderne, men læses dårligt under en vis størrelse, så hold dem til titler.

For skrifttyper at prøve viser [retroskrifttyper](https://gradiently.design/da/guide/retro-fonts) valg efter årti.

## Sådan bruger du 80'er-æstetik uden kliché

### Kliché

- Sol, gitter, palmer, krom og VHS på én gang
- Neonglød om hver eneste tekstlinje
- En skriveskrift, en kromskrift og en pixelskrift sammen
- Retro for retroens egen skyld, uden forbindelse til brandet

### Gennemtænkt

- Én hovedingrediens, for eksempel den skårne sol
- Neon på linjer og former, skarp skrift på rolige flader
- Én displayskrift til overskriften, en almindelig sans til detaljerne
- En grund: et retroprodukt, et jubilæum, en musikaften

Designer du i Gradiently, giver Lettering-behandlingerne Dybde og Spor en overskrift et 80'er-titelkorts dybde og fart, og en mørk Mark med violet og magenta lys danner nattehimlen bag den, med sit roligste område bag ordene, så skriften forbliver skarp.

En klubplakat i portrætformat med teksten Synth night over en mørk violet og magenta baggrund

En plakat til en 80'er-aften: mørk baggrund, én fed overskrift, detaljerne små og enkle.

Et YouTube-thumbnail i bredformat med teksten Back to 1986 og et afsnitsnummer over

Et YouTube-thumbnail i 1280×720 med en kort, tung titel, der kan læses i lille størrelse.

Looket passer til musikaftener, gamingkanaler, lanceringer af retroprodukter, jubilæer og alt, der skal have et nostalgisk blink. Vil du have årtiet efter, så læs [90'er-æstetik](https://gradiently.design/da/guide/90s-aesthetic).

## FAQ

### Hvad er 80'er-æstetik?

En visuel stil bygget af neonfarver på mørk baggrund, kromskrift, solnedgangsgradienter, perspektivgitre, Miami-pasteller og Memphis-mønstre.

### Hvilke farver er der i en 80'er-farvepalet?

Neonmagenta, lasercyan og solgul på midnat og dyb violet til natlooket, eller flamingopink, pool-turkis og fersken til Miami-looket.

### Hvad er forskellen på 80'er-æstetik og synthwave?

80'er-æstetik er årtiets eget design. Synthwave er en senere musik- og billedstil, der genoplivede den, og dens billedside formede det neonsolnedgangs- og gitterlook, mange nu forestiller sig.

### Hvordan laver jeg en 80'er-solnedgang i CSS?

Brug en lodret lineær gradient fra gul over orange og pink til violet, og tilføj hårde stop eller en maske for at skære mørke bånd gennem den nederste halvdel.

### Hvilke skrifttyper ser 80'er ud?

Kromet eller udtrukket displayskrift, penselskrifter og tunge kursive sans-skrifttyper. Brug én til overskriften og en almindelig sans til alt andet.