Gradients Are Everywhere

Gradient designs are everywhere on the modern web. Designers love gradients, customers must love gradients, and users are surely all about gradients. Why else would they be so ubiquitous? There are gradients on the Nighthouse site. Mostly to denote changes of light in the sky and to provide a bit of depth to the illustrations, but they’re still there. Elsewhere gradients are used on their own as fully featured illustrations.

Let’s explore why gradients are such a popular item, how to make your own gradients with pure CSS, and what the future holds for the gradient.

What Makes Gradients so Popular?

I think there are two components to the popularity of the gradient on the web.

The first important part is that the gradient is an unobtrusive, eye-pleasing design. The soft flow between colors gives it an airy look. When combined with a hard shape or line, the design becomes both sleek and modern without being harsh. A gradient can also be coded to include whichever colors a designer wants; this keeps the overall design of the page consistent without being too plain. Which brings us to the second reason for gradient supremacy.

Gradients can be created by coders and web developers who may not have a background in visual design. A gradient doesn’t require a designer to be able to draw or use Illustrator or Photoshop. The only requirement is being able to see whether the colors and design work with the rest of the page, which most people do instinctually. A CSS or Javascript code will do the heavy lifting.

Making a Gradient with CSS

There are many gradient creation tools out there. I found https://gradienta.io/, which has several different styles and the ability to download the CSS code directly and for free.

Using the “Descend Sun” CSS from Gradientia produced this gradient pattern when placed as the background of the body:

And this is the unedited CSS code:

body {
background: linear-gradient(45deg, #000850 0%, #000320 100%), radial-gradient(100% 225% at 100% 0%, #FF6928 0%, #000000 100%), linear-gradient(225deg, #FF7A00 0%, #000000 100%), linear-gradient(135deg, #CDFFEB 10%, #CDFFEB 35%, #009F9D 35%, #009F9D 60%, #07456F 60%, #07456F 67%, #0F0A3C 67%, #0F0A3C 100%);
background-blend-mode: screen, overlay, hard-light, normal;
}

Kind of cool, but the example looks completely different than this, so clearly we need to apply this to some other container. I picked a div element.

Here’s what it looks like in the div:

That’s one to one with the example.

Now let’s change some of the color values and make it look more Nighthouse:

It’s very easy to get the colors you want with a nice looking gradient. Altogether it took me under 5 minutes to input the hex color values we use for Nighthouse and play around with the percentage of color being displayed. It’s a quick way to add a subtle design elements to your site.

The Future of Gradients

It’s hard to say whether the gradient will eventually become a relic of the 2010s web design in the same way that the 90s Angelfire and Global Village Coffeehouse aesthetics have fallen out of favor (although the 90s aesthetic is starting to experience a fashionable comeback). The trend right now is largely toward very clean, very simple design.

But minimalism may have had it’s time and we’re going to reverse the trend soon. I’m personally in love with the way people are getting creative with more erratic and visually interesting designs. Take the now defunct HAWRAF design studio’s website, for example. It breaks every convention but is still super engaging. And not a gradient in sight.