# 80s aesthetic: neon, chrome and sunset gradients

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

Neon tubes, chrome type, a striped sun sinking into a glowing grid. The 80s look has been revived so often it now has its own music genre. Here is how to build it, with codes.

## The short version

- The 80s aesthetic is built from neon colours on dark grounds, chrome lettering, sunset gradients, perspective grids and pastel Miami tones.
- Much of what people now call the 80s aesthetic is filtered through synthwave, a music and visual style that revived 1980s film, arcade and synthesiser culture from the 2000s onwards.
- A sunset gradient that runs from yellow through orange and pink to violet, often sliced into horizontal bands, is the single most recognisable 80s background.
- Chrome lettering imitates polished metal with a sharp horizon line across the middle of the letters, where a light sky reflection meets a dark ground reflection.
- Neon works best as lines and shapes on a dark ground; keep the glow away from body text so it stays readable.

The **80s aesthetic** is neon on black, chrome lettering, sunset gradients sliced into bands and a glowing grid running to the horizon, with a softer side of Miami pastels and Memphis patterns. Most of today’s version comes through synthwave, a style that revived 1980s films, arcade games and synthesiser music from the 2000s onwards. Below are its key ingredients, palettes with codes, the CSS for a sunset and grid, and how to use it without tipping into costume.

## The ingredients of the 80s aesthetic

| Ingredient | Where it comes from | Use it for |
| --- | --- | --- |
| Neon pink and cyan | Signage, nightclubs, arcade cabinets | Lines, shapes and accents on dark grounds |
| Sunset gradients | Album art, film posters, holiday graphics | Backgrounds and a striped sun |
| Chrome lettering | Logos for films, cars and electronics | One or two word headlines |
| Perspective grids | Early computer graphics and arcade games | The floor of a scene, a section divider |
| Miami pastels | Art Deco hotels and television of the decade | Lighter, sunnier versions of the look |
| Memphis shapes | The Milan design collective of the early 80s | Playful patterns and confetti |
| VHS texture | Home video | Scan lines and grain over images |

Seven ingredients. Two or three of them make a convincing 80s design; all seven make a theme party.

## 80s aesthetic and synthwave

Synthwave, sometimes called outrun after Sega’s 1986 arcade driving game, is a music genre that grew online from the mid 2000s and borrows heavily from 80s film scores. Its artwork defined the look many people now picture: a dark violet sky, a striped sun, a magenta grid and chrome type. The 2011 film *Drive* and its soundtrack helped carry the style into the mainstream.

So when a brief says 80s, ask which 80s. The synthwave night version, the Miami pastel daytime version and the Memphis pattern version are three different looks. [Synthwave colours](https://gradiently.design/guide/synthwave-colors) and [vaporwave colours](https://gradiently.design/guide/vaporwave-colors) go deeper into the two internet revivals, and [Memphis design](https://gradiently.design/guide/memphis-design) covers the pattern side.

## 80s colour palettes

- Midnight: #0b0221
- Deep violet: #2b0a4a
- Neon magenta: #ff2fd0
- Laser cyan: #00f0ff
- Sun yellow: #ffd319

Neon night. Almost all of the space is midnight and violet; the neons are lines, the yellow is the sun.

- Flamingo: #ff9ecd
- Pool: #7fe7dc
- Peach: #ffd1a9
- Stucco: #fdf7f2
- Night text: #2d1e4a

Miami daytime. Pastels on a warm white, with a deep violet for text so it stays readable.

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

Six 80s gradients to copy. The sliced sun uses hard stops to cut dark bands through the lower half, the classic synthwave sun.

The chrome gradient is the one to study. Polished metal reflects a light sky above a dark ground, so the colour runs light, deepens towards the middle, snaps to dark at a sharp horizon line, then brightens again towards the bottom. That hard line is what makes it read as metal rather than grey. [Chrome text effects](https://gradiently.design/guide/chrome-effect) shows how to apply it to lettering, and [sunset gradients](https://gradiently.design/guide/sunset-gradient) has softer versions of the sky.

## Build an 80s sunset and grid 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;
}
```

A violet sky, a striped sun and a magenta grid floor tilted into perspective. Place `.sun` and `.floor` inside `.scene`.

To animate it, move the floor’s `background-position` downward on a loop and the grid appears to rush towards you. Respect reduced motion settings when you do; [CSS animated gradients](https://gradiently.design/guide/css-animated-gradient) covers the pattern.

## 80s fonts and lettering

Type did a lot of the work in the decade’s graphics. Film titles and product logos used heavy italics for speed, chrome or extruded capitals for drama, and loose brush scripts for anything set on a beach. A single word treated this way can carry a whole design.

- **Heavy italic sans serifs** suggest motion, perfect for anything sporty or fast.
- **Chrome capitals** work for one or two words at most; longer lines lose the reflection.
- **Brush scripts** pair with the Miami palette, set small beside a bold sans.
- **Pixel and grid fonts** nod to arcades, but read poorly below a large size, so keep them for titles.

For families to try, [retro fonts](https://gradiently.design/guide/retro-fonts) lists options by decade.

## How to use the 80s aesthetic without cliché

### Cliché

- Sun, grid, palm trees, chrome and VHS all at once
- Neon glow around every line of text
- A script font, a chrome font and a pixel font together
- Retro for its own sake, with no link to the brand

### Considered

- One hero ingredient, such as the sliced sun
- Neon on lines and shapes, crisp type on calm areas
- One display face for the headline, a plain sans for details
- A reason: a retro product, an anniversary, a music night

If you design in Gradiently, its Extrude and Trail lettering treatments give a heading the depth and speed of an 80s title card, and a dark Mark with violet and magenta light makes the night sky for it, keeping its calmest region behind the words so the type stays sharp.

A portrait club night poster reading Synth night over a dark violet and magenta background

An 80s night poster: dark ground, one bold headline, details small and plain.

A landscape YouTube thumbnail reading Back to 1986 with an episode number above

A YouTube thumbnail at 1280×720 with a short, heavy title that reads at small size.

The look suits music nights, gaming channels, retro product launches, anniversaries and anything that wants a wink of nostalgia. If you want the decade after, read [90s aesthetic](https://gradiently.design/guide/90s-aesthetic).

## FAQ

### What is the 80s aesthetic?

A visual style built from neon colours on dark grounds, chrome lettering, sunset gradients, perspective grids, Miami pastels and Memphis patterns.

### What colours are in an 80s colour palette?

Neon magenta, laser cyan and sun yellow on midnight and deep violet for the night look, or flamingo pink, pool teal and peach for the Miami look.

### What is the difference between the 80s aesthetic and synthwave?

The 80s aesthetic is the decade’s own design. Synthwave is a later music and art style that revives it, and its artwork shaped the neon sunset and grid look many people now picture.

### How do I make an 80s sunset in CSS?

Use a vertical linear gradient from yellow through orange and pink to violet, and add hard stops or a mask to slice dark bands through the lower half.

### What fonts look 80s?

Chrome or extruded display lettering, brush scripts and heavy italic sans serifs. Use one for the headline and a plain sans for everything else.