18 FREE Pastel Gradients Built with Divi’s Gradient Builder

Posted on June 3, 2022 by in Divi Resources 4 Comments

18 FREE Pastel Gradients Built with Divi’s Gradient Builder
Blog / Divi Resources / 18 FREE Pastel Gradients Built with Divi’s Gradient Builder
Play Button

Adding a gradient to your website is a great way to integrate color and add an interesting background to your page. Pastel gradients look especially stunning in web design since they use lighter colors to create subtle blends, enhancing the page without being too overpowering. With Divi’s new gradient builder, designing a beautiful gradient is easier than ever. With powerful functionality and extensive customization options, you can create unique, custom designs and add them to any element. In this post, you can get your hands on 18 FREE pastel gradients built with Divi’s gradient builder. Additionally, we’ll show you how to implement these gradients into your website with some step-by-step instructions.

Let’s get started!

Subscribe To Our Youtube Channel

Sneak Peek

Here is a preview of the free gradients.

18 FREE Pastel Gradients built with Divi's Gradient Builder

pastel gradients

Download The 18 FREE Pastel Gradients

To lay your hands on the free pastel gradients, you will first need to download them using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

You can import this layout to your website by navigating to the Divi Library. Click the Import & Export button at the top, then select the import tab. Select the file you downloaded, then click import. The layout will now be available in your Divi Library.

Divi Import Pastel Gradient Layout

You can add the layout to your page by choosing a premade layout and using the layout from the “Your Saved Layouts” tab.

Divi use saved layout

How to Add Pastel Gradients to your Design

Create a New Page

Let’s start by using a premade layout from the Divi library. For this design, we will use the Telehealth Landing Page from the Telehealth Layout Pack to show off our gradients.

Add a new page to your website and give it a title, then select the option to Use Divi Builder.

Divi add new page

We will use a premade layout from the Divi library for this example, so select Browse Layouts.

Divi browse layout

Search for and select the Telehealth Landing Page layout.

Divi select layout

Select Use This Layout to add the layout to your page.

Divi use layout

Now we are ready to build our design.

Adding the Pastel Gradients

If you are following along with the tutorial, open the layout pack for this tutorial in another tab for easy access to the premade gradients. We will be copying the background gradient styles from this layout to the telehealth layout.

Divi open pastel gradients

Open the module settings for the gradient you want to use in your design and copy the background.

You can copy the background by right-clicking over the Background section in the module settings or by clicking the three dots next to Background and selecting Copy Background.

Divi Copy Background

While copying and pasting the background from our layout is the easiest way to recreate the look in your own design, here are the settings for the gradient we’re using in this tutorial:

  • Gradient Colors:
    • 5%: #eaeff2
    • 24%: #bfe4ff
    • 55%: #ceceff
    • 77%: #dfd1f9
    • 93%: #e6e3f5
    • 100%: #eaeff2
  • Gradient Type: Elliptical
  • Gradient Position: Bottom Right

Divi pastel gradient background settings

Now let’s open the Telehealth layout and add the background gradients. You can paste the background gradient to a module, section, or row by clicking the three dots or right-clicking in the section settings and selecting Paste Background. You can also paste the background with the keyboard shortcut Ctrl + Alt + V while you hover over the module.

Start by adding the gradient background to the “Reinventing the Wheel” section.

Divi paste pastel gradient background

For the “Some Things are Easier From the Couch” section, set the background gradient position to Top Right so that it blends with the section above.

  • Gradient Position: Top Right

Divi adjust gradient position

Next, add the background gradient to each of the circular blurb modules surrounding the image.

We need to adjust the text and icon color for these blurbs so that they stand out against the background gradient.

  • H4 Text Color: #000000

Divi Adjust blurb text color

  • Image/Icon Invert: 100%

Divi adjust image color

Next, add the background gradient to the “Become a Member Today” row and the testimonial modules in the next section.

Divi add Gradient Background to row

Divi add gradient background to testimonials

Finally, add the background gradient to the footer, and you’re done!

Divi Add Gradient to Footer

Final Result

Now let’s take a look at the final design with the pastel background gradients.

Pastel Gradient Telehealth Layout

Final Thoughts

Divi’s gradient builder makes it easy to design beautiful gradients to add to your website. With endless design possibilities, you can create unique backgrounds in just a few clicks. You can use the 18 FREE pastel gradients in our layout to get started! If you want to learn more about Divi’s gradient builder, check out our tutorial for combining background gradients with masks and patterns. Have you tried Divi’s new gradient builder yet? Let us know what you think in the comments!

Divi Cyber-monday Sale

It's The Divi Cyber Monday Sale! Save Big For A Limited Time 👇

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Cyber-monday
Premade Layouts

Check Out These Related Posts

Divi Plugin Highlight: WP and Divi Icons Pro

Divi Plugin Highlight: WP and Divi Icons Pro

Posted on November 20, 2022 in Divi Resources

WP and Divi Icons Pro is a third-party plugin that adds over 3900 icons with 11 different styles to the Divi Builder. Icons include Font Awesome, Material Design, and custom icons. You can also upload your own and use them with all the others. In this post, we’ll take a close look at WP and Divi...

View Full Post
Divi Plugin Highlight: Divi Shop Builder

Divi Plugin Highlight: Divi Shop Builder

Posted on November 19, 2022 in Divi Resources

The Divi Shop Builder adds 14 new modules to the Divi Builder that allow you to customize the design of default WooCommerce pages with Divi. The plugin also comes with some premade shop layouts to give you a jump start on customizing your site. If you run an online store using WooCommerce and want...

View Full Post


  1. Hi, Thanks for this Gradients
    Cheers from México !!

  2. Hi Anika.

    Thanks for this great tutorial. At one time I used to favor video tutorials but this type of tutorial with text and screenshots is just so easy to follow without having to constantly rewind I actually prefer them.
    I am absolutely loving Divi’s gradient backgrounds, patterns, masks, etc. The possibilities are endless and all without slowing down the page loading speed.

    Kind regards from Manchester, England (rainy Manchester today, the Queen’s Jubilee celebrations last night were so lucky to have had a perfect break in the weather. ttfn)

  3. Brilliant. Thank you. Very handy for us non-designers.

Join To Download Today