Skip to main content

🌈 Gradient: Your Guide to a Smooth Overlay

Gradients are a great way to add depth, highlight elements, or simply give your design that extra “oooh” factor.

Emma Pescettini avatar
Written by Emma Pescettini
Updated yesterday

Whether you’re working with rectangles or circles, a gradient overlay can totally transform your ad.

🎥 In this example…

We’ve added a gradient overlay on a rectangle to brighten the image and help the logo pop. You’ll also find another creative use of gradients further down 👇

🛠 How to Create a Gradient Overlay

  1. Add a rectangle or circle element to your design

  2. Go to the “Edit” tab in the right-hand menu

  3. Under “Solid”, choose either:

    • Linear (straight gradient)

    • Radial (circular gradient)

  4. To add colours:

    • Click below the colour spectrum to create a new colour stop

    • Click the colour square to select your desired colour or type in the hex code

    • Drag the squares to adjust the blend and positioning

    • Double-tap a colour square to delete it

🎨 Gradient Tips

  • You can add up to 20 colours in one gradient

  • The closer together the colour stops are, the sharper the transition

  • The further apart, the smoother the blend

📸 Creative Example

We’ve used three colours - blue, white, and red (like in the Pepsi Max logo) - with added opacity for a cool brand-integrated overlay. The gradient was angled at 10°, covering just the lower left corner.

Use gradients with lower opacity to create soft overlays that help text or logos stand out without overpowering the image.

Now go gradient wild and give your ad some extra flavour 😎

Did this answer your question?