Tätä opasta ei ole vielä omalla kielelläsi, joten tässä se on englanniksi.
Lyhyesti
- 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.
Tällä sivulla
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.
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.
linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%)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.
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 covers the neon night in depth, including a CSS sunset and grid.
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.
The turn of the millennium is its own story: silver, iridescent and bubbly. That look has its own guide, the Y2K aesthetic, and it pairs naturally with 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 |
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 explains how.
- 4
Add fine grain
Grain adds the texture of film and paper and hides banding. 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.
/* 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%);
}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: seventies warmth with modern, generous type.
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, for example "seventies sunset stripes on cream, with grain", and it builds a Mark from the sentence. For printed pieces, check printing gradients before you send files, because warm oranges and browns can shift on paper.
Usein kysyttyä
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.
Kirjoittanut Gradiently
Gradientlyn tiimi. Gradiently on Markien ympärille rakennettu suunnittelutyökalu: eläviä liukuvärejä, joiden ansiosta kaikki suunnittelemasi näyttää omaltasi.
Katso profiilimme
