A short history of gradients in design

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 and the types of gradients.

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.

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.

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.

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.

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, and by the early 2010s every major browser could draw a gradient without an image.

/* 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); }

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.

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 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.

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.

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.

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.

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.

GR·BBGB·1K

Lilac Pulse

Katso tämä Mark