# 80s-esthetiek: neon, chroom en zonsondergangsverlopen

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

Neonbuizen, chromen letters, een gestreepte zon die in een gloeiend raster zakt. De jaren tachtig zijn zo vaak herleefd dat ze een eigen muziekgenre hebben. Zo bouw je de look, met codes.

## The short version

- De 80s-esthetiek bestaat uit neonkleuren op donkere achtergronden, chromen letters, zonsondergangsverlopen, perspectiefrasters en pastelkleuren uit Miami.
- Veel van wat mensen nu de 80s-esthetiek noemen is gefilterd door synthwave, een muziek- en beeldstijl die vanaf de jaren 2000 de film-, arcade- en synthesizercultuur van de jaren tachtig deed herleven.
- Een zonsondergangsverloop dat van geel via oranje en roze naar paars loopt, vaak in horizontale banden gesneden, is de herkenbaarste 80s-achtergrond.
- Chromen letters bootsen gepolijst metaal na met een scherpe horizonlijn midden door de letters, waar de weerspiegeling van een lichte lucht overgaat in die van een donkere ondergrond.
- Neon werkt het best als lijnen en vormen op een donkere achtergrond; houd de gloed weg van lopende tekst zodat die leesbaar blijft.

De **80s-esthetiek** is neon op zwart, chromen letters, zonsondergangsverlopen in banden gesneden en een gloeiend raster dat naar de horizon loopt, met een zachtere kant van Miami-pasteltinten en Memphis-patronen. De meeste hedendaagse versies komen via synthwave, een stijl die vanaf de jaren 2000 films, arcadegames en synthesizermuziek uit de jaren tachtig deed herleven. Hieronder staan de belangrijkste ingrediënten, paletten met codes, de CSS voor een zonsondergang en raster, en hoe je het gebruikt zonder dat het een verkleedpartij wordt.

## De ingrediënten van de 80s-esthetiek

| Ingrediënt | Waar het vandaan komt | Gebruik het voor |
| --- | --- | --- |
| Neonroze en cyaan | Uithangborden, nachtclubs, arcadekasten | Lijnen, vormen en accenten op donkere achtergronden |
| Zonsondergangsverlopen | Albumhoezen, filmposters, vakantiegrafiek | Achtergronden en een gestreepte zon |
| Chromen letters | Logo's voor films, auto's en elektronica | Koppen van een of twee woorden |
| Perspectiefrasters | Vroege computergrafiek en arcadegames | De vloer van een scène, een sectiescheiding |
| Miami-pastels | Art-decohotels en de televisie van die tijd | Lichtere, zonnigere versies van de look |
| Memphis-vormen | Het Milanese designcollectief van begin jaren tachtig | Speelse patronen en confetti |
| VHS-textuur | Videobanden voor thuis | Scanlijnen en korrel over beelden |

Zeven ingrediënten. Twee of drie ervan geven een overtuigend 80s-ontwerp; alle zeven geven een themafeest.

## 80s-esthetiek en synthwave

Synthwave, soms outrun genoemd naar Sega's arcade-racespel uit 1986, is een muziekgenre dat vanaf het midden van de jaren 2000 online groeide en sterk leunt op filmmuziek uit de jaren tachtig. De bijbehorende artwork bepaalde het beeld dat veel mensen nu voor zich zien: een donkerpaarse lucht, een gestreepte zon, een magenta raster en chromen letters. De film *Drive* uit 2011 en de soundtrack ervan brachten de stijl naar het grote publiek.

Dus als een briefing 80s zegt, vraag dan welke 80s. De synthwave-nachtversie, de Miami-pastelversie voor overdag en de Memphis-patroonversie zijn drie verschillende looks. [Synthwave-kleuren](https://gradiently.design/nl/guide/synthwave-colors) en [vaporwave-kleuren](https://gradiently.design/nl/guide/vaporwave-colors) gaan dieper in op de twee internetrevivals, en [Memphis-design](https://gradiently.design/nl/guide/memphis-design) behandelt de patroonkant.

## 80s-kleurenpaletten

- Middernacht: #0b0221
- Diep violet: #2b0a4a
- Neonmagenta: #ff2fd0
- Lasercyaan: #00f0ff
- Zongeel: #ffd319

Neonnacht. Bijna alle ruimte is middernacht en violet; de neonkleuren zijn lijnen, het geel is de zon.

- Flamingo: #ff9ecd
- Zwembad: #7fe7dc
- Perzik: #ffd1a9
- Stucwerk: #fdf7f2
- Nachttekst: #2d1e4a

Miami overdag. Pastels op een warm wit, met diep violet voor tekst zodat die leesbaar blijft.

- Outrun-zonsondergang: `linear-gradient(180deg, #ffd319 0%, #ff901f 30%, #ff2975 60%, #8c1eff 100%)`
- Gesneden zon: `linear-gradient(180deg, #ffd319 0% 45%, #1a0533 45% 48%, #ff901f 48% 62%, #1a0533 62% 66%, #ff2975 66% 80%, #1a0533 80% 85%, #c2185b 85% 100%)`
- Chroom: `linear-gradient(180deg, #f4f8ff 0%, #9fb3d1 49%, #1b2a4a 50%, #4a5b7c 62%, #e6edf7 100%)`
- Neonhorizon: `radial-gradient(circle at 50% 110%, #ff2fd0 0%, #6a0dad 35%, #0b0221 75%)`
- Miami-pastel: `linear-gradient(135deg, #ff9ecd 0%, #ffd1a9 50%, #7fe7dc 100%)`
- Laserlijnen: `repeating-linear-gradient(90deg, #0b0221 0 38px, #00f0ff 38px 40px)`

Zes 80s-kleurverlopen om te kopiëren. De gesneden zon gebruikt harde stops om donkere banden door de onderste helft te snijden, de klassieke synthwave-zon.

Het chroomverloop is degene om te bestuderen. Gepolijst metaal weerspiegelt een lichte lucht boven een donkere ondergrond, dus de kleur loopt van licht naar dieper richting het midden, springt bij een scherpe horizonlijn naar donker en wordt naar onderen weer lichter. Die harde lijn zorgt ervoor dat het als metaal leest en niet als grijs. [Chroom-teksteffecten](https://gradiently.design/nl/guide/chrome-effect) laat zien hoe je het op letters toepast, en [zonsondergangsverlopen](https://gradiently.design/nl/guide/sunset-gradient) heeft zachtere versies van de lucht.

## Een 80s-zonsondergang en raster bouwen in 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;
}
```

Een violette lucht, een gestreepte zon en een magenta rastervloer in perspectief gekanteld. Zet `.sun` en `.floor` binnen `.scene`.

Om het te animeren verschuif je de `background-position` van de vloer in een lus naar beneden, en het raster lijkt op je af te razen. Houd daarbij rekening met de instelling voor verminderde beweging; [CSS-geanimeerde kleurverlopen](https://gradiently.design/nl/guide/css-animated-gradient) behandelt het patroon.

## 80s-lettertypes en letterwerk

Typografie deed veel van het werk in de grafiek van dat decennium. Filmtitels en productlogo's gebruikten zware cursieve letters voor snelheid, chromen of diepe hoofdletters voor drama en losse penseelschriften voor alles wat op het strand speelde. Eén woord op deze manier behandeld kan een heel ontwerp dragen.

- **Zware cursieve schreefloze letters** suggereren beweging, perfect voor alles wat sportief of snel is.
- **Chromen hoofdletters** werken voor hooguit een of twee woorden; langere regels verliezen de weerspiegeling.
- **Penseelschriften** passen bij het Miami-palet, klein gezet naast een gedurfde sans.
- **Pixel- en rasterlettertypes** knikken naar arcades, maar lezen slecht onder een grote maat, dus bewaar ze voor titels.

Voor lettertypefamilies om uit te proberen staat in [retrolettertypes](https://gradiently.design/nl/guide/retro-fonts) een lijst per decennium.

## De 80s-esthetiek gebruiken zonder cliché

### Cliché

- Zon, raster, palmbomen, chroom en VHS tegelijk
- Neongloed rond elke regel tekst
- Een schrijfletter, een chromen letter en een pixelletter samen
- Retro om het retro zijn, zonder band met het merk

### Doordacht

- Eén hoofdingrediënt, zoals de gesneden zon
- Neon op lijnen en vormen, scherpe letters op rustige vlakken
- Eén displaylettertype voor de kop, een gewone sans voor details
- Een reden: een retroproduct, een jubileum, een muziekavond

Ontwerp je in Gradiently, dan geven de lettertekenbehandelingen Extrusie en Spoor een kop de diepte en snelheid van een 80s-titelkaart, en een donkere Mark met violet en magenta licht maakt de nachtelijke hemel erbij, met zijn rustigste gebied achter de woorden zodat de letters scherp blijven.

Een staande clubavondposter met de tekst Synth night op een donkerpaarse en magenta achtergrond

Een poster voor een 80s-avond: donkere achtergrond, één gedurfde kop, details klein en eenvoudig.

Een liggende YouTube-thumbnail met de tekst Back to 1986 en een afleveringsnummer erboven

Een YouTube-thumbnail van 1280×720 met een korte, zware titel die ook klein leesbaar is.

De look past bij muziekavonden, gamekanalen, retroproductlanceringen, jubilea en alles wat een knipoog van nostalgie wil. Wil je het decennium erna, lees dan [90s-esthetiek](https://gradiently.design/nl/guide/90s-aesthetic).

## FAQ

### Wat is de 80s-esthetiek?

Een visuele stijl opgebouwd uit neonkleuren op donkere achtergronden, chromen letters, zonsondergangsverlopen, perspectiefrasters, Miami-pastels en Memphis-patronen.

### Welke kleuren horen bij een 80s-kleurenpalet?

Neonmagenta, lasercyaan en zongeel op middernacht en diep violet voor de nachtlook, of flamingoroze, zwembadturkoois en perzik voor de Miami-look.

### Wat is het verschil tussen de 80s-esthetiek en synthwave?

De 80s-esthetiek is het eigen ontwerp van het decennium. Synthwave is een latere muziek- en kunststijl die het laat herleven, en de artwork ervan vormde de neonzon-en-rasterlook die veel mensen nu voor zich zien.

### Hoe maak ik een 80s-zonsondergang in CSS?

Gebruik een verticaal lineair kleurverloop van geel via oranje en roze naar paars, en voeg harde stops of een masker toe om donkere banden door de onderste helft te snijden.

### Welke lettertypes zien er 80s uit?

Chromen of diepe displaybelettering, penseelschriften en zware cursieve schreefloze letters. Gebruik er één voor de kop en een gewone sans voor de rest.