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.

More...

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!

Shane

Author: Shane Melaugh

Shane Melaugh is one of the co-founders of Thrive Themes and in charge of marketing, content and product strategy. 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.

7Comments

Stephen DB Reply

Thanks for the advice on gradients and the very useful resources Shane. I have not tried it yet but was thinking of doing this on the background of my web site. Can you do a multiple select of all the separate colour points together and adjust the overall opacity of the gradient and them globally as well as individually ? It would make sense to have a balance slider?

Craig B Reply

Hi Shane,
Nice work with this – I would like to know what you think about using svg to do similar things with gradients – how does Architect work with them – can you use them as with any background image etc.
I have used them for years (usually gray svg gradients that I have as backgrounds for menu items) – would love for you to discuss or do a video on what can be done with them in Architect. Thanks for all the work – loving it!

I like how you showed how to make text stand out more using the gradient feature. This is often a challenge with background images and a beautiful alternative to adding a darkened background box behind the text. My love for Thrive Architect grows more and more each day!

Stripe can also be a great example for gradients

Hazel Reply

I was wondering how to create a curve like Quuu Promote.

Shane, thanks a lot for the tips, I’ll start exploring this area better, I think it’s very important for conversion as well.