Flat design ruled interface work for the first half of the 2010s, and gradients were treated as dated skeuomorphism — then, within a few years, gradients quietly came back as one of the defining looks of modern web and app design.
From flat to gradient again
iOS 7's 2013 redesign and the rise of Material Design pushed heavy, glossy 3D surfaces out of fashion in favor of flat colors. The turn came a few years later: Instagram's 2016 rebrand replaced its skeuomorphic camera icon with a smooth orange-to-purple gradient mark, and that palette went on to influence countless startup logos and landing-page hero sections through the late 2010s and early 2020s.
Three ways CSS spreads color
linear-gradient(45deg, red, blue) stretches color along a straight line at a given angle — the workhorse behind button and card backgrounds. radial-gradient(circle, yellow, orange) spreads color outward from a point in circles or ellipses, good for spotlight effects. conic-gradient(red, yellow, green, blue, red) sweeps color around a center point like a clock hand, and it's the only one of the three that can draw a pie chart or a circular progress ring without any extra graphics.
Color stops and repetition
Each color can be pinned to a percentage, as in linear-gradient(red 0%, yellow 50%, blue 100%), controlling exactly how sharply one color hands off to the next. The repeating-linear-gradient() and repeating-radial-gradient() functions tile that same stop sequence across an element automatically, which is how stripes and checkerboard patterns get built with one line of CSS instead of dozens of manually placed stops.
Why you'd need this
- Pick and copy ready-made gradient CSS without hand-tuning angles and colors.
- Work out which gradient type fits a given visual effect.
- Fine-tune color stop positions for the exact transition you want.
The vendor-prefix years
Before the CSS Images Level 3 spec settled on today's syntax around 2012, gradients were a browser-specific mess: early WebKit (2008 Safari) required the verbose -webkit-gradient(linear, left top, left bottom, from(red), to(blue)), while Firefox and Opera each shipped their own incompatible -moz- and -o- variants. The clean, comma-separated syntax used today is the standard the W3C eventually converged on, and it's why -webkit-gradient() still occasionally turns up as fossilized code in very old stylesheets.