Gradients in Thrive Architect: How to (& How NOT to) Use Them

With Thrive Architect, you can add custom color gradients to any element that has a background. You can even create gradients as overlays on top of images or background patterns.

In this tutorial, we'll take a quick tour through all of the gradient features. Then, we'll take a look at the dos and don'ts of using color gradients in web design, so that your results will loo pro.


Resources & Inspiration

In the video, I showed two sites where you can find inspiration and even copy the color codes of pre-designed gradients. Here are the links:

And here are some examples of gradients used well in web design:

Example 1: The Natural Light Effect

purple to light purple background gradient by CashNotify

CashNotify, an app that integrates with Stripe payments, uses a gradient in the first section of their homepage.

We can learn an important lesson from the way this gradient is designed: it looks good because it looks natural. It looks like something we might encounter in the real world, if we were looking at a purple surface that has a soft light shining at it from the bottom right corner.

You can achieve this effect with almost any color, if you do two things:

  1. Pick your main color, then shift the color towards a lighter tone for the second point in your gradient. You can also shift it slightly towards a yellow hue, to create a natural light effect.
  2. Keep the difference between the two colors in the gradient small.

Conversely, this explains why gradients with a big difference between the color points tend to look a bit disturbing: they look unnatural.

Example 2: Opacity Gradient for Readability

Semi-transparent, blue gradient on top of a background image

Quuu Promote has an attention grabbing top section on the homepage. The gradient overlayed on the background image goes from opaque to semi-transparent. This creates a visually pleasing effect and also provides added contrast in the background area of the logo and top menu. 

Example 3: Bolder Colors

curved dividers and bold gradients on the Asana homepage

Since their redesign in 2015, Asana have made gradients part of their brand identity. They use gradients on their homepage and other pages of the site, as well as throughout the user interface of the product. The design doesn't shy away from some bolder gradients as well.

Example 3: Subtle, Light Gradients

subtle light blue to lime green background gradient

The Nylas homepage uses gradients combined with geometric shapes in several places. The top background gradient on the homepage uses colors light enough to provide contrast for the dark text on top. This is particularly difficult to pull off without the colors looking flat or dull (you'll notice that usually, gradients are darker, with light text on top).

Discover More

If you like what you've seen so far and you've got an appetite for more, these will interest you:

I hope you enjoyed this post! If you have any questions or suggestions for other design-related or Thrive Architect related tutorials you'd like to see in the future, let me know by leaving a comment!


Author: Shane Melaugh

Shane Melaugh is a co-founder and the CEO of Thrive Themes. When he isn’t plotting new ways to create awesome WordPress themes & plugins, he likes to geek out about camera equipment and medieval swords. He also writes about startups and marketing here.

Check out our ​UnBlackFriday Deal