Why I Love Gradients in Design (and Why You Should Too)

Every time I design a website, I love taking time to ponder what the hero section could look like.

Since it’s the first thing people see when they visit the site, I want it to be visually striking and attention-grabbing.

Now, there are many ways to design a website’s hero section, but my go-to technique most of the time is to apply a subtle gradient to the hero section background, transitioning between the brand’s primary colors. This gradient adds depth to the background, making the logo, tagline, and copy stand out.

Gradients, however, aren’t limited to just hero sections. They can be used in all aspects of design, be it websites, adverts, and art. In this article, we’ll be delving into what gradients are, when (and when not) to use them, and how to make a gradient with tools like Photoshop and Canva.

Table of Contents

• What are gradients in design?
• When I Use Gradients
• When I Avoid Gradients
• How to Make a Gradient in Photoshop
• How to Make a Gradient in Canva for Free

What are gradients in design?

Gradients are visual effects that involve a gradual and smooth transition between two or more colors. They add depth and a new dimension to a design, increasing its aesthetic appeal and making it look more real.

There are different kinds of gradients. For example, here’s a linear (or axial) gradient:

This gradient has two colors on opposite sides. In this case, there’s a light green color at the top of the box and a blue color at the bottom. The green color smoothly transitions vertically, darkening gradually till it becomes blue. Linear gradients can go from top-bottom, bottom-top, left-right, right-left, and diagonal.

There’s another kind of gradient: radial gradient.

This gradient also has two colors: black and white. The white color, however, starts in the center of the box and gradually gets darker as it moves outwards till it becomes a deep black.

Color gradients are used in all kinds of thing, from social media ads and websites to product packaging and even hair colors.

Here are some ways gradients are used in design:

• Backgrounds. Like me, many web designers use gradients as background colors for sections, headers, or entire web pages. This creates a more dynamic and visually interesting backdrop, as opposed to solid, flat colors.
• Buttons and UI elements. Gradients are applied to buttons, icons, and other user interface elements to give them a three-dimensional or glossy appearance. This can help draw attention to interactive elements.
• Text effects. Gradients can be used to add color variations to text, creating a subtle or bold effect. This is often seen in headings or call-to-action (CTA) text.
• Image overlays. Some designers overlap gradients on images to enhance or modify the color tone of the images, making the text more readable or creating a specific mood.
• Shadows and highlights. Gradients can be used to simulate shadows or highlights, providing depth to the elements on the page. This technique is commonly used in card designs and interface elements.
• Masking and transitions. Designers can combine gradients and masking techniques to create smooth transitions between different sections or images on a webpage.

When I Use Gradients

While gradients are a great design tool/technique, they shouldn’t always be used. Below are three instances where I use gradients in design with examples:

1. To Draw Visitors’ Attention

When you combine the right colors in a gradient, you can use it to draw visitors’ attention to certain parts of your design. I find that gradients are a more efficient and aesthetically pleasing way to highlight certain parts of your design than, say, annotations.

For example, here’s Dribbble’s hiring page.

Image Source

What I love: The white minimalistic background helped the gradient borders pop. This way, as people scroll through the page, their eyes catch the different-colored gradients. They pause a bit to watch the short clips within them.

As those clips are a demo of how Dribbble works, gradient borders are a great way to ensure that visitors don’t skip the videos.

Another example of this in action is on Dropbox’s homepage.

Image Source

Apart from the animated video beneath the hero section (which is amazing, by the way), Dropbox’s background is a stark black color. This, I suspect, is why the gradient background works well to draw attention to the Dropbox demo halfway down the page.

What I love: The combination of blue, deep pink, and purple makes for a unique color blend that contrasts nicely with the black background and the bright white color of the demo video.

2. To Create a Cohesive Design

One of the best uses of gradients is to reinforce brand colors and maintain a consistent visual identity across a website (or advert). This helps you create a cohesive and recognizable brand presence.

A great example is Intercom’s homepage. The hero section’s background is a dark blue, punctuated with a short video of how Intercom works when installed. Beneath the hero section are four other sections with gradients that represent Intercom’s brand colors.

Image Source

Image Source

Image Source

Pay close attention to how Intercom combines radial and linear gradients to create a smooth transition of sections. It goes from a light blue to a dark blue and then a light yellow to a darker peach color.

What I love: As you scroll, the changes in the color are not jarring. Instead, they’re pleasing to the eye, and the different patterns of the gradients help you focus on the website copy.

Trello does the same thing on its homepage. In the hero section, we see a striking linear gradient that goes from deep purple to hot pink.

Image Source

Underneath the hero section, there’s a small section that plays on these purple, blue, and pink hues to draw (and keep) visitors’ attention.

Image Source

In a separate section close to the end of the page, there’s another linear gradient that goes from a dark blue to a lighter blue color.

Image Source

At this point, you already know that blue, purple, and pink are Trello’s brand colors. Instead of using the solid versions of those colors, Trello combines them beautifully to create a stunning visual identity.

3. To Make a Design Memorable

Something I like to ensure when I design a website is that visitors never forget it. This is a tough feat to achieve, seeing as there are millions of beautiful websites scattered across the vast universe that is the Internet.

But in the few times I have designed websites (and the gazillion times I have browsed through websites), I realized that gradients that move are more memorable to me than static gradients.

Take a look at Lattice’s hero section:

The moving shades of green are so stunning to look at. While the moving gradient is only on the hero section of the Lattice website, it’s not one you forget easily. The same goes for Stripe, too:

What I love: However, instead of different shades of the same color, Stripe beautifully combined different but complementary colors, like blue, yellow, pink, purple, orange, and red, to create a breathtaking visual for its hero section background.

When I Avoid Gradients

While gradients can enhance many designs, I believe that there are situations where you shouldn’t use them. Here are some examples:

• Minimalist designs. Although we’ve seen gradient borders used on a white background (which is moderate), gradients may not align with the aesthetic of minimalist designs, where simplicity and clean lines are prioritized. In such cases, gradients can introduce unnecessary visual complexity.
• High-contrast text. We’ve seen some websites that use gradients as backgrounds with readable text on top. It is possible (and common) to do, but if you’re not very good with colors or you need your text to be highly readable, it might be best to forgo gradients in that area completely.
• Complex data visualization. If you’re including graphs and charts in your design, you should aim to make your data visualization clear and precise. Overly intricate gradients can distract from the information you’re presenting.
• Accessibility concerns. Brightly colored (and/or moving) gradients may not be accessible, especially for users with visual impairments. This is why you should know how to combine colors so that there’s enough contrast between text and background colors.
• Mobile responsiveness. Gradients may not always translate well to smaller screens, and their visual impact might be diminished on mobile devices. If you’re not sure how to make gradients remain effective and visually appealing across various screen sizes, it’s best to not use them.

If gradients won’t work, I opt for other ways to make my design cutting-edge. If you’re looking for more inspiration, check out our guide to the latest dominating design trends.

How to Make a Gradient in Photoshop

Adobe Photoshop is arguably the most popular graphic design tool that exists. If you’re looking to create a gradient in Photoshop, here are the steps to take:

1. Open your Photoshop app and activate the Gradient Tool.

When you open your Photoshop app, look at the toolbar on the left of your screen. Find the Gradient tool; it has a square-shaped black-to-white gradient icon.

On the right side of the screen, you’ll see the color picker, where you can choose some basic colors you want for your gradient. In the top toolbar, you have a dropdown menu where you can pick a gradient from the gradient color classes (or gradient presets).

Beside the dropdown menu are icons representing the five common gradient styles: linear, radial, angular, reflected, and diamond.

2. Set up your gradient.

If you want a simple gradient, pick one from the gradient presets in the dropdown menu. The options there are limited, but you can find some cool ones that may be just what your design needs.

But if you want to create a custom gradient, use the color picker and the toolbar to choose the gradient and gradient style you want. The colors you choose will stay in the Basics section of the gradient presets. Click on the dropdown menu, tap Basics, and choose your custom gradient.

3. Add and edit a gradient layer.

Next, click and drag across your canvas to add a gradient to it. If you have an image underneath, you can adjust the opacity of the gradient in the Properties panel. This makes the gradient transparent, so you can see the image below.

As you can see in the screenshot above, I have used a radial gradient style to create that gradient. Once you create your gradient, use the on-canvas gradient tool to adjust the length and direction of the gradient. The further you drag the handle, the wider your gradient will spread.

If you’re creating a radial gradient like I am here, you can adjust the width of the circle to customize your gradient.

4. Add new colors.

You may notice that I’m currently using two colors in my gradient. But as you’ve seen, you can combine more than two colors to create a custom gradient. To do that in Photoshop, double-click on the color picker to choose a new color. I chose lilac.

Navigate to the Properties panel, where you’ll see the Gradient Controls Slider. Click anywhere along the bottom of the slider to add a new color stop and adjust its position. You can remove color stops by clicking and dragging them away from the slider.

You can change where the colors meet and blend by adjusting the diamond-shaped icons on the canvas.

5. Change your gradient preset.

You can easily change the colors of your gradient by clicking the Gradient preset menu in the Properties panel or the options bar and selecting a new preset, which you can customize however you wish.

6. Change the blend mode, etc.

In the Properties panel or options bar, there are many features to customize your gradient. For example, you can choose a blending mode, change the opacity percentage of your gradient, and save the preset.

If you want to reverse the order of colors in the gradient fill, check the Reverse box. And if you want a smoother blend, check the Dither box.

7. Save your gradient.

If you plan to reuse the custom gradient you’ve created, click on Save preset in the Properties panel and choose a name for your gradient. Once you save, your new gradient will be added to the bottom of the Gradient preset dropdown menu.

How to Make a Gradient in Canva for Free

Adobe Photoshop is a paid tool — and you may want to create simple gradients without having to pay. That’s where Canva comes in. This free-to-use online graphic design tool has the features you need to create all kinds of gradients. Here are the steps to take:

1. Open Canva and create a design.

Visit Canva.com, log in (or sign up), and click the Create a design button at the top-left corner of your screen. You’ll see some items with predetermined dimensions, such as doc, whiteboard, presentation, Instagram post, flier, logo, etc.

You can choose any of these depending on what you want to design, but if your preferred sizes are not there, click on Custom size and input your preferred width and height.

2. Add a color and use default gradient styles.

Here’s what your screen will look like after inputting your custom size. I did 600 x 600 px.

Click on the empty canvas and navigate to the color tile in the editor toolbar. Then, scroll down to the Gradients section and select your preferred gradient style.

3. Create custom gradients.

As you can see, the default gradient options are very limited, and you’ll likely want to make a custom gradient with your own mix of colors. You can do that with Canva, too.

All you need to do is navigate to Document colors (this is above the Gradients section) and click the “+” to add a new color. Go to the Gradient tab and click the “+” sign to add a new color. You can add up to 10 gradient colors.

To delete a color, select the color tile you want to delete and click Delete color.

4. Style your gradient.

You can change the color order by moving the color stops underneath the Gradient colors subsection. Beneath the Gradient colors subsection, change the style of your gradient (e.g., linear gradient, horizontal gradient, diagonal gradient, radial gradient, and more).

Elevate Your Designs With Stunning Gradients

Gradients are one of my favorite ways to bring a sense of fun and uniqueness to websites and other designs I make. With gradients, you can play around with different colors, styles, and even movements to create a vibrant design that draws (and keeps) your audience’s attention and improves engagement.

If you’re looking for a way to create an immersive, one-of-a-kind experience with your designs, try gradients. Experiment with different colors, shapes, and styles that resonate with the ever-evolving tastes of your audience.