# 80er-Ästhetik: Neon, Chrom und Sonnenuntergangsverläufe

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

Neonröhren, Chrom-Schrift, eine gestreifte Sonne, die in ein leuchtendes Raster sinkt. Der 80er-Look wurde so oft wiederbelebt, dass er ein eigenes Musikgenre hat. So baust du ihn, mit Codes.

## The short version

- Die 80er-Ästhetik besteht aus Neonfarben auf dunklem Grund, Chrom-Schrift, Sonnenuntergangsverläufen, Perspektivrastern und pastelligen Miami-Tönen.
- Vieles von dem, was heute 80er-Ästhetik heißt, kommt durch Synthwave, einen Musik- und Bildstil, der ab den 2000er Jahren die Film-, Spielhallen- und Synthesizer-Kultur der 1980er wiederbelebte.
- Ein Sonnenuntergangsverlauf von Gelb über Orange und Pink bis Violett, oft in waagerechte Bänder geschnitten, ist der erkennbarste 80er-Hintergrund überhaupt.
- Chrom-Schrift imitiert poliertes Metall mit einer scharfen Horizontlinie quer durch die Buchstaben, wo eine helle Himmelsspiegelung auf eine dunkle Bodenspiegelung trifft.
- Neon funktioniert am besten als Linien und Formen auf dunklem Grund; halte den Glow von Fließtext fern, damit er lesbar bleibt.

Die **80er-Ästhetik** ist Neon auf Schwarz, Chrom-Schrift, in Bänder geschnittene Sonnenuntergangsverläufe und ein leuchtendes Raster bis zum Horizont, mit einer weicheren Seite aus Miami-Pastell und Memphis-Mustern. Das meiste der heutigen Version kommt über Synthwave, einen Stil, der ab den 2000er Jahren Filme, Spielhallenspiele und Synthesizer-Musik der 1980er wiederbelebte. Unten findest du die wichtigsten Zutaten, Paletten mit Codes, das CSS für Sonnenuntergang und Raster und wie du sie nutzt, ohne ins Kostüm zu kippen.

## Die Zutaten der 80er-Ästhetik

| Zutat | Woher sie kommt | Einsatz für |
| --- | --- | --- |
| Neonpink und Cyan | Leuchtreklame, Nachtclubs, Spielautomaten | Linien, Formen und Akzente auf dunklem Grund |
| Sonnenuntergangsverläufe | Albumcover, Filmplakate, Urlaubsgrafik | Hintergründe und eine gestreifte Sonne |
| Chrom-Schrift | Logos für Filme, Autos und Elektronik | Überschriften aus ein oder zwei Wörtern |
| Perspektivraster | Frühe Computergrafik und Spielhallenspiele | Der Boden einer Szene, ein Abschnittstrenner |
| Miami-Pastelle | Art-déco-Hotels und das Fernsehen des Jahrzehnts | Hellere, sonnigere Versionen des Looks |
| Memphis-Formen | Das Mailänder Designkollektiv der frühen 80er | Verspielte Muster und Konfetti |
| VHS-Textur | Heimvideo | Scanlines und Körnung über Bildern |

Sieben Zutaten. Zwei oder drei davon ergeben ein überzeugendes 80er-Design; alle sieben ergeben eine Mottoparty.

## 80er-Ästhetik und Synthwave

Synthwave, manchmal nach Segas Fahrspiel von 1986 Outrun genannt, ist ein Musikgenre, das ab Mitte der 2000er online wuchs und stark bei Filmmusik der 80er borgt. Sein Artwork prägte den Look, den viele heute vor Augen haben: ein dunkelvioletter Himmel, eine gestreifte Sonne, ein magentafarbenes Raster und Chrom-Schrift. Der Film *Drive* von 2011 und sein Soundtrack trugen den Stil in den Mainstream.

Wenn ein Briefing also 80er sagt, frag, welche 80er. Die nächtliche Synthwave-Version, die tagesheitere Miami-Pastell-Version und die Memphis-Muster-Version sind drei verschiedene Looks. [Synthwave-Farben](https://gradiently.design/de/guide/synthwave-colors) und [Vaporwave-Farben](https://gradiently.design/de/guide/vaporwave-colors) gehen tiefer auf die zwei Internet-Revivals ein, und [Memphis-Design](https://gradiently.design/de/guide/memphis-design) behandelt die Musterseite.

## 80er-Farbpaletten

- Mitternacht: #0b0221
- Tiefviolett: #2b0a4a
- Neonmagenta: #ff2fd0
- Laser-Cyan: #00f0ff
- Sonnengelb: #ffd319

Neonnacht. Fast der ganze Raum ist Mitternacht und Violett; die Neons sind Linien, das Gelb ist die Sonne.

- Flamingo: #ff9ecd
- Pool: #7fe7dc
- Pfirsich: #ffd1a9
- Stuck: #fdf7f2
- Nachttext: #2d1e4a

Miami am Tag. Pastelle auf warmem Weiß, mit tiefem Violett für Text, damit er lesbar bleibt.

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

Sechs 80er-Verläufe zum Kopieren. Die geschnittene Sonne nutzt harte Stopps, um dunkle Bänder durch die untere Hälfte zu schneiden, die klassische Synthwave-Sonne.

Der Chrom-Verlauf ist der, den man studieren sollte. Poliertes Metall spiegelt einen hellen Himmel über einem dunklen Boden, die Farbe läuft also hell, vertieft sich zur Mitte, springt an einer scharfen Horizontlinie auf Dunkel und wird zum unteren Rand wieder heller. Diese harte Linie lässt es wie Metall statt wie Grau wirken. [Chrom-Texteffekte](https://gradiently.design/de/guide/chrome-effect) zeigt, wie du ihn auf Schrift anwendest, und [Sonnenuntergangsverläufe](https://gradiently.design/de/guide/sunset-gradient) hat weichere Versionen des Himmels.

## Einen 80er-Sonnenuntergang und ein Raster in CSS bauen

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

Ein violetter Himmel, eine gestreifte Sonne und ein magentafarbener Rasterboden, in Perspektive gekippt. Setze `.sun` und `.floor` in `.scene`.

Zum Animieren verschiebst du die `background-position` des Bodens in einer Schleife nach unten, und das Raster scheint auf dich zuzurasen. Beachte dabei die Einstellungen für reduzierte Bewegung; [Animierte CSS-Verläufe](https://gradiently.design/de/guide/css-animated-gradient) behandelt das Muster.

## 80er-Schriften und Lettering

Schrift leistete in der Grafik des Jahrzehnts viel Arbeit. Filmtitel und Produktlogos nutzten schwere Kursive für Tempo, Chrom- oder Extrude-Versalien für Dramatik und lockere Pinselschriften für alles am Strand. Ein einzelnes so behandeltes Wort kann ein ganzes Design tragen.

- **Schwere kursive Groteskschriften** deuten Bewegung an, perfekt für alles Sportliche oder Schnelle.
- **Chrom-Versalien** funktionieren für höchstens ein oder zwei Wörter; längere Zeilen verlieren die Spiegelung.
- **Pinselschriften** passen zur Miami-Palette, klein gesetzt neben einer kräftigen Grotesk.
- **Pixel- und Rasterschriften** nicken Richtung Spielhalle, lesen sich aber unterhalb einer großen Größe schlecht, behalte sie also für Titel.

Für Schriftfamilien zum Ausprobieren listet [Retro-Schriften](https://gradiently.design/de/guide/retro-fonts) Optionen nach Jahrzehnt auf.

## So nutzt du die 80er-Ästhetik ohne Klischee

### Klischee

- Sonne, Raster, Palmen, Chrom und VHS alles auf einmal
- Neon-Glow um jede Textzeile
- Eine Schreibschrift, eine Chrom-Schrift und eine Pixelschrift zusammen
- Retro um des Retros willen, ohne Bezug zur Marke

### Durchdacht

- Eine Hauptzutat, etwa die geschnittene Sonne
- Neon auf Linien und Formen, scharfe Schrift auf ruhigen Flächen
- Eine Display-Schrift für die Überschrift, eine schlichte Grotesk für Details
- Ein Grund: ein Retro-Produkt, ein Jubiläum, ein Musikabend

Wenn du in Gradiently gestaltest, geben die Lettering-Behandlungen Extrusion und Spur einer Überschrift die Tiefe und das Tempo einer 80er-Titelkarte, und ein dunkler Mark mit violettem und magentafarbenem Licht liefert den Nachthimmel dazu und hält seine ruhigste Region hinter den Worten, sodass die Schrift scharf bleibt.

Ein Hochformat-Plakat für eine Clubnacht mit Synth-Nacht auf dunkelviolettem und magentafarbenem Hintergrund

Ein 80er-Nacht-Plakat: dunkler Grund, eine kräftige Überschrift, Details klein und schlicht.

Ein Querformat-YouTube-Vorschaubild mit Zurück ins Jahr 1986 und einer Folgennummer darüber

Ein YouTube-Vorschaubild in 1280×720 mit einem kurzen, schweren Titel, der auch klein lesbar ist.

Der Look passt zu Musikabenden, Gaming-Kanälen, Retro-Produktlaunches, Jubiläen und allem, was ein Augenzwinkern Nostalgie will. Willst du das Jahrzehnt danach, lies [90er-Ästhetik](https://gradiently.design/de/guide/90s-aesthetic).

## FAQ

### Was ist die 80er-Ästhetik?

Ein Bildstil aus Neonfarben auf dunklem Grund, Chrom-Schrift, Sonnenuntergangsverläufen, Perspektivrastern, Miami-Pastellen und Memphis-Mustern.

### Welche Farben gehören zu einer 80er-Farbpalette?

Neonmagenta, Laser-Cyan und Sonnengelb auf Mitternacht und Tiefviolett für den Nacht-Look, oder Flamingopink, Poolpetrol und Pfirsich für den Miami-Look.

### Was ist der Unterschied zwischen 80er-Ästhetik und Synthwave?

Die 80er-Ästhetik ist das eigene Design des Jahrzehnts. Synthwave ist ein späterer Musik- und Kunststil, der es wiederbelebt, und sein Artwork prägte den Neon-Sonnenuntergangs- und Raster-Look, den viele heute vor Augen haben.

### Wie erstelle ich einen 80er-Sonnenuntergang in CSS?

Nutze einen vertikalen linearen Verlauf von Gelb über Orange und Pink bis Violett und füge harte Stopps oder eine Maske hinzu, um dunkle Bänder durch die untere Hälfte zu schneiden.

### Welche Schriften wirken wie 80er?

Chrom- oder Extrude-Display-Schrift, Pinselschriften und schwere kursive Groteskschriften. Nimm eine für die Überschrift und eine schlichte Grotesk für alles andere.