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

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

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 und Vaporwave-Farben gehen tiefer auf die zwei Internet-Revivals ein, und Memphis-Design behandelt die Musterseite.

80er-Farbpaletten

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 zeigt, wie du ihn auf Schrift anwendest, und Sonnenuntergangsverläufe hat weichere Versionen des Himmels.

Einen 80er-Sonnenuntergang und ein Raster in CSS bauen

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

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 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 Optionen nach Jahrzehnt auf.

So nutzt du die 80er-Ästhetik ohne Klischee

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.

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.