From supporting role to star -- the evolution of the gradient

Was I the only one surprised to see gradients make a comeback in a bold new way?

The early Internet had gradients everywhere – a quintessential design element found in backgrounds, fonts, and every place in between.

Check out gradients making an appearance on some famous websites in the 90s:

The boldness of gradients was eventually swapped out in favor of flat design – solid colors and simple lines – in the early 2010s.

Now, gradients are back in full force and they’re louder and bolder than ever.

But to be fair, they never completely went away. What’s changed is the way we use them.

A good way to illustrate the evolution of gradients is to look at two popular logos over the years.

Let’s start with iTunes (now Apple Music).

If we look at the iTunes logo from 2006-2010, we see a preference for skeuomorphism, or the literal representation of objects in our design.

iTunes was all about music, so the logo includes a realistic looking CD.

But in 2010, Apple replaced the CD entirely and introduced a circle with a gradient (it’s probably safe to assume the circle represents that original CD, but it’s not a literal interpretation).

But here’s the thing about this new gradient – it’s not a gradient full of colors the way we see in design today.

Instead, it’s a gradient used to create a 3D effect. The blue circle looks like it bulges out and has a subtle reflection that suggests it’s made of glass. It’s not a literal CD, but it still takes cues from the reflective 3D nature of a CD in the real world.

The 2012 logo is a variation of the same principles – shiny, glass surface with a gradient used to lift the logo off the page.

But in 2014, we see a complete shift.

They’re still using a gradient, but, this time, it doesn’t create that same 3D effect. Instead, this logo is grounded in flat design principles of minimal colors and simpler elements and the gradient is there for aesthetic enhancement.

The 3D note has been flattened to a simple, white graphic and the circle has lost its glassy reflection.

The gradient gives it a touch of personality but it’s pretty subtle – it’s the red-pink color that catches our eye.

But look at what happens in 2015 – the gradient isn’t playing a supporting role. It’s bringing the heat!

By adding multiple colors (we’ve got three packed in a small space – blue, purple, and pink), the gradient is at the forefront, bringing life to an otherwise very simple design.

It’s the smooth blending and melding of the three colors that makes the logo come to life.

Let’s look at the Facebook Messenger logo as another example.

All four logos are very similar and all use a gradient, but they use it differently.

That first logo from 2011 uses a gradient to create that 3D effect. Going from that darker blue to a lighter blue combined with that drop shadow gives the sense that the speech bubble is floating off the page.

But the gradient from 2013 is different – the gradient doesn’t feel like it’s going simply from dark to light – it goes from one blue to a different blue.

We can see this by looking at the HSL values for the two gradients.

HSL stands for hue (the type of color), saturation (the intensity of the color), and lighting (how dark or light the color is).

If you compare the hue values for the two ends of the gradient of the 2011 logo, you’ll see that they’re basically the same (221 vs. 220).

The main difference is the lighting (58 vs. 31).

That tells us that it’s the same color, just a lighter and darker version of it, which is what happens when light bounces off different parts of a 3D surface, suggesting that, here, the gradient is meant to create dimension.

But for the 2013 logo, the lighting is about the same (51 vs. 50). Instead, the difference is in the hue (194 vs. 212). The gradient is made up of two different types of blue, which tells us that it’s not about creating dimension, but more about creating a pleasing aesthetic.

I like the look better, but the blues are still both pretty blue. The gradient looks good, but it’s subtle, giving it a nice effect but still playing a supporting role.

It’s in the 2020 logo where the gradient takes the lead.

It’s another example of using multiple colors (blue, purple, pink) to create a beautiful blend that pops and becomes the dominant aesthetic in the graphic.

It’s tempting to say that gradients are back, but they’ve actually always been here. The difference is that, these days, they’re stepping into the limelight and owning the stage.

Inspo

Want to give gradients a try in your own projects? Here are a few inspired by some popular sites:

Implementing in Tailwind

Tailwind makes it really simple to implement background gradients. Here’s how you’d do that for one of our inspo gradients.

1. Declare your colors
   All of our gradients use three custom colors, called color stops, that are not predefined by Tailwind, so we need to extend our Tailwind config to include them.
   
   If we’re implementing our Stripe gradient, here’s what that would look like:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      gradientColorStops: {
        'custom-red': '#F23F56',
        'custom-yellow': '#FFC657',
        'custom-blue': '#90E0FE',
      }
    }
  }
}

2. Use Tailwind classes
   Pick the div you want to have the gradient. If you want to give your whole landing page a gradient, you might want to pick the body tag.
   

   Then apply the following code:

<body class="bg-gradient-to-r from-custom-red via-custom-yellow to-custom-blue"></body>

The “r” in “bg-gradient-to-r” tells us what direction we’re moving in, in this case, to the right. The “from-”, “via-”, and “to-” tell us the order of colors we’re moving through. There’s more you can do with gradients in Tailwind, check it out here.

What do you think of gradients? Are you a fan of the multi-color blends or do you prefer a more subtle application?

Reply and let me know! I’d love to hear your thoughts :)

Saron

PS. If you enjoyed this email, I’d love for you to share it with a friend! And if they like it, they can subscribe here:

Thanks for your help :)