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.
On this page
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
Where it comes from
Use it for
Where it comes from
Use it for
Where it comes from
Use it for
Where it comes from
Use it for
Where it comes from
Use it for
Where it comes from
Use it for
Where it comes from
Use it for
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 and vaporwave colours go deeper into the two internet revivals, and Memphis design covers the pattern side.
80s colour palettes
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 shows how to apply it to lettering, and sunset gradients has softer versions of the sky.
Build an 80s sunset and grid in 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;
}.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 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 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.
An 80s night poster: dark ground, one bold headline, details small and plain.
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.
Questions people ask
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.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile