# A short history of gradients in design

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

Colour blends are older than screens, fell out of fashion almost overnight and came back stronger. Here is how the gradient travelled from painted skies to living backgrounds.

## The short version

- Painters blended colour long before screens, using soft transitions of tone and hazy blue distances to suggest depth and light.
- Early computer screens could show too few colours for smooth blends, so gradients appeared as visible bands or dithered patterns.
- Apple's Aqua interface, unveiled in 2000, made glossy gradients a defining look of the decade that followed.
- Flat design pushed gradients aside in the early 2010s, most visibly with Windows 8 in 2012 and iOS 7 in 2013.
- Gradients returned in the mid 2010s, with Instagram's 2016 gradient icon as the best-known example, and have since grown into mesh, grain and shader-driven looks.

The **history of gradients** in design is a story of technology catching up with painting. Artists blended colour for centuries; print learned to fake it with dots and split ink; early screens could barely show it; the glossy interfaces of the 2000s overused it; flat design removed it; and in the mid 2010s it came back and never really left. Each era's gradients look the way they do because of the tools of the time.

This is a short, practical history, with the look of each era as a gradient you can copy. For the basics, see [what is a gradient](https://gradiently.design/guide/what-is-a-gradient) and the [types of gradients](https://gradiently.design/guide/types-of-gradients).

| When | What happened | The gradient look |
| --- | --- | --- |
| Renaissance | Sfumato and aerial perspective in painting | Soft tonal blends, hazy blue distance |
| 1704 | Newton's *Opticks* arranges the spectrum in a circle | The first colour wheel |
| Late 1800s | Halftone printing | Tone made of dots |
| Early 1990s | 256-colour screens | Banding and dithering |
| 2000 to 2007 | Aqua, Windows XP's Luna, Web 2.0, Vista's Aero | Gloss, gel and glass |
| 2012 to 2014 | Windows 8, iOS 7, Material Design | Flat colour, gentle blends |
| 2016 | Instagram's gradient icon | Bright blends return |
| Late 2010s onwards | Mesh, conic, grain, shaders | Soft light fields and motion |

The gradient's story at a glance.

## Gradients before screens: painting and print

Painters blended colour long before anyone called it a gradient. Renaissance artists used *sfumato*, soft transitions of tone without hard outlines, a technique famously associated with Leonardo da Vinci. Landscape painters used aerial perspective: distant hills fade into a pale, bluish haze and the sky lightens towards the horizon, which is the oldest gradient most of us know.

Painted sky, zenith to horizon: `linear-gradient(180deg, #4f74a3 0%, #8fadc9 50%, #e9dcc0 100%)`

Deep blue overhead, paling to a warm haze at the horizon: the blend landscape painters used to make space feel deep.

Science gave colour blends their order. Isaac Newton's prism experiments spread white light into a continuous spectrum, and his *Opticks* (1704) arranged its colours in a circle, the ancestor of every [colour wheel](https://gradiently.design/guide/color-wheel).

Printing had to fake continuous tone. Halftone screens, developed in the late nineteenth century, turned shades into dots of different sizes. Printers also used the split fountain: two or more inks loaded side by side on one press, blending into each other on the rollers, a technique still loved in screen printing and letterpress. The airbrush gave illustrators smooth blends by hand and shaped much of the poster and album art of the 1970s and 1980s.

- Split fountain, red into blue: `linear-gradient(90deg, #d7263d 0%, #7a4f8f 50%, #1b98e0 100%)`
- Airbrushed sunset poster: `linear-gradient(180deg, #1b1340 0%, #7b2d6e 45%, #f06a3f 75%, #ffd27a 100%)`

Two pre-digital looks. A split fountain mixes real inks, so its middle is a darker purple; airbrushed skies stacked warm bands under a dark top.

## Early screens: banding, dithering and tiled images

Early computer displays could show only a limited set of colours at once, and the 256-colour palettes common in the early 1990s could not hold a smooth blend. Gradients broke into visible stripes, called banding, or were dithered into patterns of dots that the eye averaged into a blend. The same stripes still appear when a gradient is long and subtle; see [gradient banding](https://gradiently.design/guide/gradient-banding).

- Banded blend, five colours: `linear-gradient(90deg, #14145c 0% 20%, #26268a 20% 40%, #3a3ab4 40% 60%, #5454d6 60% 80%, #7676f0 80% 100%)`
- The same blend, smooth: `linear-gradient(90deg, #14145c 0%, #7676f0 100%)`

What a limited palette does to a blend. With only five colours to work with, a smooth gradient becomes a staircase.

The early web had no gradient function at all. Designers made a gradient image one pixel wide and told the browser to repeat it across the page. SVG, a W3C Recommendation from 2001, did include linear and radial gradients, but CSS gradients came later: WebKit introduced a prefixed syntax in the late 2000s, the standard version was written into [CSS Images Level 3](https://www.w3.org/TR/css-images-3/), and by the early 2010s every major browser could draw a gradient without an image.

```css
/* Early 2000s: a 1px-wide image, repeated across */
.header { background: #2b7ae0 url(header-bg.png) repeat-x; }

/* 2010s: the browser draws the gradient */
.header { background: linear-gradient(180deg, #6fb4f5, #2b7ae0); }

/* Now: the same blend, interpolated in OKLCH */
.header { background: linear-gradient(180deg in oklch, #6fb4f5, #2b7ae0); }
```

Three eras of the same header. Today one line does it all, with [smoother OKLCH blending](https://gradiently.design/guide/css-gradient-oklch) when you want it.

## The glossy 2000s: Aqua, Luna and Web 2.0

Apple unveiled the Aqua interface for Mac OS X in 2000: translucent, glossy buttons that looked like drops of coloured gel, with a bright highlight across the top. Windows XP followed in 2001 with its Luna theme, gradient-shaded blue title bars and a green Start button. By the middle of the decade, glossy buttons, reflective logos and soft shadows were so common on websites that the look became shorthand for Web 2.0.

- Aqua-style gel button: `linear-gradient(180deg, #d9efff 0%, #8cc8f7 48%, #3d8ee6 52%, #74c1ff 100%)`
- Luna-style title bar: `linear-gradient(180deg, #3a8cf4 0%, #0a5fd8 12%, #0453d0 80%, #0a3fa8 100%)`
- Web 2.0 glossy green: `linear-gradient(180deg, #b6e67a 0%, #7cc242 50%, #5ea82a 51%, #8fd14f 100%)`
- Aero-style glass: `linear-gradient(180deg, #e8f3fb 0%, #bcd8ee 50%, #9cc3e3 51%, #d2e8f7 100%)`

The signature trick of the era: a sudden change of tone halfway down, which the eye reads as a reflection on a glossy surface.

Windows Vista's Aero glass in 2007 pushed further into translucency. The problem was repetition: when every button, badge and logo carried the same highlight, gloss stopped signalling quality and started signalling a template. The guide to the [Y2K aesthetic](https://gradiently.design/guide/y2k-aesthetic) covers the wider look of those years.

## The flat design turn: Metro and iOS 7

Microsoft's Metro design language, first on Windows Phone and then across Windows 8 in 2012, used solid colour tiles, plain type and no gloss at all. Apple's iOS 7 in 2013 dropped the stitched leather, felt and textures of earlier versions for a flat, light design. Google's Material Design, introduced in 2014, kept colour flat but used shadow to show layers.

### Glossy 2000s

- A hard highlight halfway down
- Reflections and bevels
- Gradients on every control, as decoration
- Imitations of real materials

### Flat 2010s

- Solid colour or a gentle two-tone blend
- No bevels, minimal shadow
- Colour used to organise, not decorate
- Type and space doing the work

Gradients did not disappear; they changed character. Many of the new iOS 7 app icons used bright, gentle top-to-bottom gradients instead of gloss, a hint of what was coming.

## The gradient returns: Instagram and the mid 2010s

In 2016 Instagram replaced its camera icon with a simple outline over a warm-to-violet gradient, one of the most visible brand gradients ever made. Around the same time, apps and brands began pairing flat layouts with bold, bright gradients, often two colours blended at an angle. Flat design had cleared the decoration away; gradients came back as colour and mood rather than fake gloss.

- iOS 7-style bright green: `linear-gradient(180deg, #87fc70 0%, #0bd318 100%)`
- Yellow through pink to violet: `linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%)`
- Violet to pink, preset era: `linear-gradient(135deg, #7f5af0 0%, #ff6ac1 100%)`
- Blue to cyan, preset era: `linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)`

The look of the return: flat layouts, bright blends. Two-colour pairs like the last two became so common that they now read as presets.

That success had a cost. Generators and design tools shipped the same pairs, and by the end of the decade many feeds looked alike, a problem covered in [why every feed looks the same](https://gradiently.design/guide/why-every-feed-looks-the-same).

## Gradients now: mesh, grain, shaders and motion

The latest chapter is about richness and control. Mesh gradients, with several colour points pulling in different directions, moved from specialist vector tools into everyday design apps. `conic-gradient()`, defined in CSS Images Level 4, reached browsers from 2018. WebGL shaders let websites render gradients that move and respond in real time, grain returned to make digital colour feel physical, and in 2025 Apple introduced Liquid Glass, a translucent material across its platforms.

A soft light field: `radial-gradient(ellipse at 30% 25%, #ffd6a5 0%, #f28482 30%, #6d3fa0 65%, #1a1033 100%)`

Light rather than stripes or gloss: peach glowing into coral, violet and night. See [mesh gradients](https://gradiently.design/guide/mesh-gradients) and [shader gradients](https://gradiently.design/guide/shader-gradients) for how today's fields are made.

The newest idea is that a gradient can be an identity with an owner, not a style anyone can sample. Gradiently's Marks are living gradients: colours, materials, light, grain and motion as one recipe, each with a public code and exactly one owner at a time. For where things go next, see [gradient trends 2026](https://gradiently.design/guide/gradient-trends-2026).

A Mark: a gradient identity with a code, a creator and one owner.

## FAQ

### When were CSS gradients introduced?

WebKit introduced a prefixed gradient syntax in the late 2000s, and the standard `linear-gradient()` and `radial-gradient()` were defined in CSS Images Level 3. By the early 2010s every major browser supported them without an image.

### Why did gradients go out of style?

By the late 2000s glossy gradients were on almost every button and logo, so they stopped feeling special. Flat design, led by Windows 8 in 2012 and iOS 7 in 2013, replaced them with solid colour and plain type.

### When did gradients come back into fashion?

In the mid 2010s. Instagram's 2016 gradient icon is the best-known example, and bright two-colour blends spread across apps, websites and brands soon after.

### What was Apple's Aqua interface?

Aqua was the look Apple unveiled for Mac OS X in 2000, with glossy, gel-like buttons and translucent surfaces. It set the glossy gradient style of the decade.

### What came after flat design?

Flat layouts with rich colour: bright gradients first, then mesh gradients, grain, shader-driven motion and, more recently, translucent materials such as Apple's Liquid Glass.