# 80-luvun estetiikka: neon, kromi ja auringonlaskut

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

Neonputkia, kromitekstiä ja raidallinen aurinko, joka laskee hehkuvan ruudukon taakse. 80-luvun ilme on palannut niin usein, että sillä on oma musiikkilajinsa. Näin rakennat sen koodeineen.

## The short version

- 80-luvun estetiikan rakennuspalikoita ovat neonvärit tummalla taustalla, kromikirjaimet, auringonlaskun liukuvärit, perspektiiviruudukot ja Miamin pastellisävyt.
- Suuri osa nykyisestä 80-luvun estetiikasta suodattuu synthwaven kautta. Tämä musiikki- ja kuvallinen tyyli elvytti 1980-luvun elokuva-, pelihalli- ja syntetisaattorikulttuuria 2000-luvulta alkaen.
- Keltaisesta oranssin ja pinkin kautta violettiin kulkeva auringonlaskuliukuväri, usein vaakasuoriksi raidoiksi leikattuna, on tunnistettavin 80-luvun tausta.
- Kromikirjaimet jäljittelevät kiillotettua metallia. Kirjainten keskellä kulkee terävä horisontti, jossa vaalean taivaan heijastus kohtaa tumman maan heijastuksen.
- Neon toimii parhaiten viivoina ja muotoina tummalla taustalla. Pidä hehku poissa leipätekstistä, jotta teksti pysyy luettavana.

**80-luvun estetiikka** tarkoittaa neonia mustalla, kromikirjaimia, raidoiksi leikattuja auringonlaskuliukuvärejä ja horisonttiin jatkuvaa hehkuvaa ruudukkoa. Pehmeämpään puoleen kuuluvat Miamin pastellit ja Memphis-kuviot. Nykyversio pohjautuu pitkälti synthwaveen, joka toi 1980-luvun elokuvat, pelihallipelit ja syntetisaattorimusiikin takaisin 2000-luvulta alkaen. Alta löydät tärkeimmät ainekset, väripaletit koodeineen, auringonlaskun ja ruudukon CSS:n sekä vinkit siihen, ettei ilme muutu naamiaisasuksi.

## 80-luvun estetiikan ainekset

| Aines | Alkuperä | Käyttökohde |
| --- | --- | --- |
| Neonpinkki ja syaani | Kyltit, yökerhot ja peliautomaatit | Viivat, muodot ja korostukset tummilla taustoilla |
| Auringonlaskuliukuvärit | Levynkannet, elokuvajulisteet ja lomagrafiikka | Taustat ja raidallinen aurinko |
| Kromikirjaimet | Elokuvien, autojen ja elektroniikan logot | Yhden tai kahden sanan otsikot |
| Perspektiiviruudukot | Varhainen tietokonegrafiikka ja pelihallipelit | Kuvan lattia tai osioiden erotin |
| Miamin pastellit | Art deco -hotellit ja vuosikymmenen televisio | Ilmeen vaaleammat ja aurinkoisemmat versiot |
| Memphis-muodot | 1980-luvun alun milanolainen suunnittelijaryhmä | Leikkisät kuviot ja konfetti |
| VHS-tekstuuri | Kotivideot | Juovat ja rakeisuus kuvien päällä |

Seitsemän ainesta. Kaksi tai kolme niistä tekee uskottavan 80-luvun suunnitelman. Kaikki seitsemän tekee teemajuhlan.

## 80-luvun estetiikka ja synthwave

Synthwavea kutsutaan joskus outruniksi Segan vuoden 1986 ajopelin mukaan. Musiikkilaji kasvoi verkossa 2000-luvun puolivälistä lähtien ja lainaa paljon 80-luvun elokuvamusiikista. Sen kuvasto määritteli monen nykyisen mielikuvan: tummanvioletti taivas, raidallinen aurinko, magenta ruudukko ja kromiteksti. Vuoden 2011 *Drive*-elokuva ja sen musiikki auttoivat tuomaan tyylin valtavirtaan.

Kun toimeksianto pyytää 80-lukua, selvitä mikä sen versio. Synthwaven yö, Miamin pastellinen päivä ja Memphis-kuviot ovat kolme eri ilmettä. [Synthwave-värit](https://gradiently.design/fi/guide/synthwave-colors) ja [vaporwave-värit](https://gradiently.design/fi/guide/vaporwave-colors) käsittelevät verkkokulttuurin paluita tarkemmin. [Memphis-design](https://gradiently.design/fi/guide/memphis-design) perehtyy kuvioihin.

## 80-luvun väripaletit

- Keskiyö: #0b0221
- Syvä violetti: #2b0a4a
- Neonmagenta: #ff2fd0
- Lasersyaani: #00f0ff
- Auringonkeltainen: #ffd319

Neonyö. Lähes koko tila on keskiyönsinistä ja violettia. Neonvärit ovat viivoja ja keltainen aurinko.

- Flamingo: #ff9ecd
- Uima-allas: #7fe7dc
- Persikka: #ffd1a9
- Rappaus: #fdf7f2
- Yön teksti: #2d1e4a

Miamin päivä. Pastelleja lämpimällä valkoisella ja syvänviolettia tekstiin, jotta se pysyy luettavana.

- Outrun-auringonlasku: `linear-gradient(180deg, #ffd319 0%, #ff901f 30%, #ff2975 60%, #8c1eff 100%)`
- Raidallinen aurinko: `linear-gradient(180deg, #ffd319 0% 45%, #1a0533 45% 48%, #ff901f 48% 62%, #1a0533 62% 66%, #ff2975 66% 80%, #1a0533 80% 85%, #c2185b 85% 100%)`
- Kromi: `linear-gradient(180deg, #f4f8ff 0%, #9fb3d1 49%, #1b2a4a 50%, #4a5b7c 62%, #e6edf7 100%)`
- Neonhorisontti: `radial-gradient(circle at 50% 110%, #ff2fd0 0%, #6a0dad 35%, #0b0221 75%)`
- Miamin pastellit: `linear-gradient(135deg, #ff9ecd 0%, #ffd1a9 50%, #7fe7dc 100%)`
- Laserviivat: `repeating-linear-gradient(90deg, #0b0221 0 38px, #00f0ff 38px 40px)`

Kuusi kopioitavaa 80-luvun liukuväriä. Raidallinen aurinko käyttää teräviä värirajoja leikkaamaan tummia raitoja alaosaan. Se on synthwaven klassinen aurinko.

Kromiliukuväriä kannattaa tutkia. Kiillotettu metalli heijastaa vaaleaa taivasta tumman maan yllä. Väri alkaa vaaleana, tummenee keskustaa kohti, vaihtuu jyrkästi tummaksi terävällä horisontilla ja vaalenee taas alaosaa kohti. Juuri tämä terävä raja saa pinnan näyttämään metallilta eikä harmaalta. [Kromitekstitehosteet](https://gradiently.design/fi/guide/chrome-effect) näyttää, miten käytät sitä kirjaimissa. [Auringonlaskuliukuvärit](https://gradiently.design/fi/guide/sunset-gradient) tarjoaa taivaan pehmeämpiä versioita.

## 80-luvun auringonlasku ja ruudukko CSS:llä

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

Violetti taivas, raidallinen aurinko ja magenta lattiaruudukko perspektiivissä. Sijoita `.sun` ja `.floor` elementin `.scene` sisään.

Animoi lattian `background-position` alaspäin toistuvana liikkeenä, niin ruudukko näyttää syöksyvän sinua kohti. Kunnioita vähennetyn liikkeen asetuksia. [Animoidut CSS-liukuvärit](https://gradiently.design/fi/guide/css-animated-gradient) käsittelee toteutustapaa.

## 80-luvun fontit ja kirjaimet

Tekstillä oli suuri rooli vuosikymmenen grafiikassa. Elokuvien nimet ja tuotelogot käyttivät paksua kursiivia vauhdin luomiseen, kromisia tai kohotettuja versaalikirjaimia dramaattisuuteen ja rentoja sivellinkirjaimia rantatunnelmaan. Näin käsitelty yksittäinen sana voi kantaa koko suunnitelman.

- **Paksut kursivoidut groteskit** viestivät liikkeestä ja sopivat urheilullisiin tai nopeisiin aiheisiin.
- **Kromiversaalit** toimivat enintään yhdessä tai kahdessa sanassa. Pidemmissä riveissä heijastus katoaa.
- **Sivellinkirjaimet** sopivat Miamin palettiin. Käytä niitä pieninä paksun groteskin vieressä.
- **Pikseli- ja ruudukkofontit** viittaavat pelihalleihin, mutta niitä on vaikea lukea pieninä. Säästä ne otsikoihin.

[Retrofontit](https://gradiently.design/fi/guide/retro-fonts) listaa kokeiltavia fonttiperheitä vuosikymmenittäin.

## Näin käytät 80-luvun estetiikkaa ilman kliseitä

### Kliseinen

- Aurinko, ruudukko, palmut, kromi ja VHS yhtä aikaa
- Neonhehku jokaisen tekstirivin ympärillä
- Käsialafontti, kromifontti ja pikselifontti yhdessä
- Retroa retron vuoksi ilman yhteyttä brändiin

### Harkittu

- Yksi pääaines, kuten raidallinen aurinko
- Neonia viivoissa ja muodoissa, terävää tekstiä rauhallisissa kohdissa
- Yksi näyttävä otsikkofontti ja tavallinen groteski tietoihin
- Syy: retrotuote, vuosipäivä tai musiikki-ilta

Gradientlyn Kohotettu- ja Jälki-käsittelyt antavat otsikolle 80-luvun alkutekstien syvyyttä ja vauhtia. Tumma Mark, jossa on violettia ja magentaa valoa, luo yötaivaan ja pitää rauhallisimman alueensa sanojen takana, jotta teksti säilyy terävänä.

Klubi-illan pystyjuliste, jossa Synth-ilta lukee tummanvioletin ja magentan taustan päällä

80-luvun iltajuliste: tumma tausta, yksi paksu otsikko ja pienet, selkeät lisätiedot.

Vaakasuora YouTube-pikkukuva, jossa lukee Takaisin vuoteen 1986 ja yläpuolella jakson numero

YouTube-pikkukuva koossa 1280×720. Lyhyt, paksu otsikko erottuu myös pienessä koossa.

Ilme sopii musiikki-iltoihin, pelikanaville, retrotuotteiden julkaisuihin, vuosipäiviin ja kaikkeen, johon halutaan pieni nostalginen pilke. Seuraavasta vuosikymmenestä kertoo [90-luvun estetiikka](https://gradiently.design/fi/guide/90s-aesthetic).

## FAQ

### Mitä 80-luvun estetiikka tarkoittaa?

Visuaalinen tyyli, jossa yhdistyvät neonvärit tummalla taustalla, kromikirjaimet, auringonlaskuliukuvärit, perspektiiviruudukot, Miamin pastellit ja Memphis-kuviot.

### Mitä värejä 80-luvun väripalettiin kuuluu?

Yöilmeessä neonmagenta, lasersyaani ja auringonkeltainen keskiyönsinisellä ja syvänvioletilla. Miami-ilmeessä flamingonpinkki, altaan turkoosi ja persikka.

### Mikä ero on 80-luvun estetiikalla ja synthwavella?

80-luvun estetiikka on vuosikymmenen omaa suunnittelua. Synthwave on myöhempi musiikki- ja taidetyyli, joka elvyttää sitä. Sen kuvasto loi monien nykyisen mielikuvan neonauringonlaskusta ja ruudukosta.

### Miten teen 80-luvun auringonlaskun CSS:llä?

Käytä pystysuuntaista lineaarista liukuväriä keltaisesta oranssin ja pinkin kautta violettiin. Leikkaa alaosaan tummia raitoja terävillä värirajoilla tai maskilla.

### Mitkä fontit näyttävät 80-luvulta?

Kromiset tai kohotetut otsikkokirjaimet, sivellinkirjaimet ja paksut kursivoidut groteskit. Käytä yhtä niistä otsikkoon ja tavallista groteskia kaikkeen muuhun.