# Retro gradients: seventies sunsets to nineties screens

[Canonical HTML page](https://gradiently.design/guide/retro-gradients)

Mustard and rust stripes, neon on black, teal and purple and title bar blue. Three decades of retro gradients with codes, and the small changes that make them feel new.

## The short version

- A retro gradient is a colour blend that recalls a specific decade, most often the warm stripes of the seventies, the neon of the eighties or the teal and purple of the nineties.
- Seventies gradients use mustard, burnt orange, rust and chocolate brown, often as hard-edged stripes on cream.
- Eighties gradients split into two looks: neon pink and cyan on black, and bright pastel pop in pink, teal, yellow and lilac.
- Nineties gradients include teal to purple blends, deep jewel tones and the navy to blue gradient of old desktop title bars.
- To modernise a retro gradient, soften the stripe edges, lower the saturation slightly, blend in OKLCH and add fine grain.

A **retro gradient** is a colour blend that instantly recalls a decade. The seventies had warm stripes of mustard, orange, rust and brown. The eighties had neon pink and cyan on black, and bright pastel pop. The nineties had teal and purple, deep jewel tones and the navy to blue bars of early desktop software. Below is a palette and a set of copyable gradients for each decade, then a method for modernising them so they feel like a reference, not a costume.

Retro works because colour carries memory. People recognise a decade from its palette long before they notice the typeface or the layout, which makes these gradients a shortcut to a mood. For the longer story of how gradients moved through design, read the [history of gradients](https://gradiently.design/guide/history-of-gradients).

## Seventies gradients: sunset stripes in orange and brown

The seventies palette is warm and earthy: harvest gold, burnt orange, rust and a deep chocolate brown, with avocado green as the odd one out and cream as the ground. Its signature is the stripe: four or five bands of colour stacked like a sunset, with hard edges rather than a smooth blend.

- Cream: #f2e2c4
- Harvest gold: #e0a526
- Burnt orange: #d9661f
- Rust: #a8431f
- Chocolate: #4a2c1d
- Avocado: #7d7b35

A seventies palette. Everything leans warm, even the green.

Seventies sunset stripes: `linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%)`

Hard colour stops make stripes: each colour starts exactly where the last one ends. This is the most recognisable retro gradient of all.

Smooth blends from the same colours feel softer and suit photos or long text better than stripes do. Keep them in the warm family and they never go muddy, because every step is a close neighbour of the last. For smoother warm skies, see [sunset gradients](https://gradiently.design/guide/sunset-gradient).

- Harvest sunset: `linear-gradient(180deg, #e0a526 0%, #d9661f 50%, #a8431f 100%)`
- Avocado kitchen: `linear-gradient(135deg, #7d7b35 0%, #b9a44c 50%, #e9d8a6 100%)`
- Brown velvet: `radial-gradient(circle at 50% 30%, #c77d3a 0%, #6b3a1f 55%, #2e1a10 100%)`
- Cream soda: `linear-gradient(180deg, #f2e2c4 0%, #f0c27a 55%, #e0a526 100%)`

Smooth seventies blends: gold to rust, avocado to cream, a velvety brown glow and a pale cream to gold.

## Eighties gradients: neon nights and pastel pop

The eighties gave us two very different looks. One is the neon night: magenta and cyan glowing on black, chrome lettering and grids, drawn from the films and arcade games of the time. The other is bright, playful pastel pop: pink, teal, canary yellow and lilac, often with black squiggles and geometric shapes. Our guide to [vaporwave colors](https://gradiently.design/guide/vaporwave-colors) covers the neon night in depth, including a CSS sunset and grid.

- Bubblegum: #ff4f9a
- Pool teal: #00c2c7
- Canary: #ffe14d
- Lilac: #b18cff
- Squiggle black: #111111

Eighties pastel pop. Black is part of the palette: it outlines shapes and keeps the brights from floating.

- Neon night: `linear-gradient(180deg, #0b0221 0%, #2d0b59 60%, #ff2a6d 100%)`
- Chrome: `linear-gradient(180deg, #ffffff 0%, #9fb3c8 46%, #2b3a55 50%, #d6c0ff 100%)`
- Aerobics: `linear-gradient(90deg, #ff4f9a 0%, #b18cff 50%, #00c2c7 100%)`
- Pop stripe: `repeating-linear-gradient(45deg, #ffe14d 0 14px, #ff4f9a 14px 28px)`

Eighties gradients. Chrome uses a hard stop at 46 to 50% to fake a reflected horizon; Pop stripe is a repeating gradient, so it tiles forever.

## Nineties gradients: teal, purple and title bar blue

Nineties colour is cooler and more digital. Teal was everywhere, often paired with purple and magenta on sports kits, packaging and early web pages. Desktop software brought the navy to bright blue gradient of window title bars, one of the first gradients many people saw on a screen. Later in the decade came translucent teal plastics and, in print, deeper jewel tones such as hunter green, burgundy and plum.

- Title bar blue: `linear-gradient(90deg, #000080 0%, #1084d0 100%)`
- Teal to magenta: `linear-gradient(135deg, #0f7c80 0%, #5b2a86 60%, #c2185b 100%)`
- Translucent teal: `linear-gradient(160deg, #b8f1f0 0%, #3cc6c4 50%, #1a7f8e 100%)`
- Plum and burgundy: `linear-gradient(160deg, #3d1f4f 0%, #800020 100%)`
- Hunter green: `linear-gradient(160deg, #2f4f3a 0%, #6b7d4f 100%)`

Nineties gradients, from the screen (title bar blue) to the shelf (translucent teal) to the page (jewel tones).

The turn of the millennium is its own story: silver, iridescent and bubbly. That look has its own guide, the [Y2K aesthetic](https://gradiently.design/guide/y2k-aesthetic), and it pairs naturally with [holographic gradients](https://gradiently.design/guide/holographic-gradients).

## Retro gradients by decade at a glance

| Decade | Key colours | Gradient style | Best for |
| --- | --- | --- | --- |
| 1970s | Gold, orange, rust, brown, avocado | Hard stripes, warm soft blends | Food, drink, vintage shops, music |
| 1980s neon | Magenta, cyan, violet on black | Glowing horizons, chrome | Nightlife, gaming, synth music |
| 1980s pop | Pink, teal, canary, lilac, black | Bright blends, stripes, shapes | Kids, fitness, playful launches |
| 1990s | Teal, purple, navy, jewel tones | Diagonal blends, title bar blue | Tech nostalgia, streetwear, zines |

Pick the decade by the mood you want, not only by the era your audience grew up in.

## How to modernise a retro gradient

A retro gradient copied exactly can look like a fancy dress costume. Modern retro keeps the palette people recognise and changes the finish: softer edges, slightly calmer colour and a texture that feels like print rather than a flat screen.

1. **Keep the palette, soften the edges** Give each stripe a short blend of 3 to 4% instead of a hard stop. It still reads as stripes, but it looks printed rather than drawn.
2. **Take a little saturation out** Original swatches were often seen in print or on dim screens. Dimming them slightly on modern bright screens gets closer to how they felt.
3. **Blend in OKLCH** Interpolating in OKLCH keeps the middle of each blend bright instead of greyish. [CSS gradients in OKLCH](https://gradiently.design/guide/css-gradient-oklch) explains how.
4. **Add fine grain** Grain adds the texture of film and paper and hides banding. [Grainy gradients](https://gradiently.design/guide/grainy-gradients) has the recipe.
5. **Use modern type** Let the colour carry the decade and pick a clean, current typeface. Period colour plus period type is where it tips into pastiche.

```css
/* Original: hard seventies stripes */
.retro {
  background: linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%);
}

/* Modernised: softer colours, short blends, OKLCH, fine grain */
.retro-modern {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"),
    linear-gradient(180deg in oklch, #f4e6cc 0 18%, #dba84a 22% 34%, #d27a45 38% 50%, #a95a3c 54% 66%, #5a3a2a 70%);
}
```

The same stripes twice. The modern version uses slightly calmer colours, 4% blends between bands, OKLCH interpolation and an SVG noise layer on top.

### Dated

- Hard, saturated stripes straight from a swatch book
- Period typeface, period layout, period colour at once
- Flat colour with visible banding
- Every retro trope in one design

### Modern retro

- Short blends between bands, slightly calmer colour
- Retro colour with clean, current type
- Fine grain for a printed feel
- One decade, one motif, plenty of space

An A4 poster announcing a summer sale of vintage denim, suede and cord

An A4 poster: seventies warmth with modern, generous type.

A square playlist cover titled Songs from the tape deck

A playlist cover: one strong line lets the colour do the time travel.

If you want a retro look you can keep, describe it in the Gradiently [Forge](/forge), for example "seventies sunset stripes on cream, with grain", and it builds a Mark from the sentence. For printed pieces, check [printing gradients](https://gradiently.design/guide/print-gradients) before you send files, because warm oranges and browns can shift on paper.

## FAQ

### What colours make a gradient look retro?

Colours strongly tied to a decade: mustard, orange, rust and brown for the seventies, neon magenta and cyan or bright pastels for the eighties, and teal, purple and navy for the nineties.

### How do I make seventies stripes in CSS?

Use hard colour stops, where each colour starts exactly where the last ends, for example `linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%)`.

### How do I stop a retro gradient looking dated?

Keep the palette but soften the stripe edges, lower saturation slightly, blend in OKLCH, add fine grain and pair it with clean, modern type.

### What is the difference between retro and vintage gradients?

The words are used almost interchangeably. Retro usually means a new design that references a past decade, while vintage suggests something that looks genuinely aged, often with more texture and fading.

### Which decade suits my brand?

Choose by mood: seventies for warmth and craft, eighties neon for nightlife and energy, eighties pop for play, and nineties for digital nostalgia and streetwear.