Including a gradient to your web site is a good way to combine colour and add an attention-grabbing background to your web page. Pastel gradients look particularly gorgeous in net design since they use lighter colours to create delicate blends, enhancing the web page with out being too overpowering. With Divi’s new gradient builder, designing a lovely gradient is simpler than ever. With highly effective performance and in depth customization choices, you’ll be able to create distinctive, customized designs and add them to any ingredient. On this submit, you may get your palms on 18 FREE pastel gradients constructed with Divi’s gradient builder. Moreover, we’ll present you the best way to implement these gradients into your web site with some step-by-step directions.
Let’s get began!
Here’s a preview of the free gradients.
Obtain The 18 FREE Pastel Gradients
To put your palms on the free pastel gradients, you’ll first have to obtain them utilizing the button beneath. To realize entry to the obtain you have to to subscribe to our Divi Every day electronic mail record through the use of the shape beneath. As a brand new subscriber, you’ll obtain much more Divi goodness and a free Divi Format pack each Monday! In the event you’re already on the record, merely enter your electronic mail deal with beneath and click on obtain. You’ll not be “resubscribed” or obtain further emails.
You possibly can import this structure to your web site by navigating to the Divi Library. Click on the Import & Export button on the high, then choose the import tab. Choose the file you downloaded, then click on import. The structure will now be obtainable in your Divi Library.
You possibly can add the structure to your web page by selecting a premade structure and utilizing the structure from the “Your Saved Layouts” tab.
The way to Add Pastel Gradients to your Design
Create a New Web page
Let’s begin through the use of a premade structure from the Divi library. For this design, we are going to use the Telehealth Touchdown Web page from the Telehealth Format Pack to indicate off our gradients.
Add a brand new web page to your web site and provides it a title, then choose the choice to Use Divi Builder.
We’ll use a premade structure from the Divi library for this instance, so choose Browse Layouts.
Seek for and choose the Telehealth Touchdown Web page structure.
Choose Use This Format so as to add the structure to your web page.
Now we’re able to construct our design.
Including the Pastel Gradients
In case you are following together with the tutorial, open the structure pack for this tutorial in one other tab for straightforward entry to the premade gradients. We will likely be copying the background gradient kinds from this structure to the telehealth structure.
Open the module settings for the gradient you need to use in your design and duplicate the background.
You possibly can copy the background by right-clicking over the Background part within the module settings or by clicking the three dots subsequent to Background and choosing Copy Background.
Whereas copying and pasting the background from our structure is the best option to recreate the look in your personal design, listed below are the settings for the gradient we’re utilizing on this tutorial:
- Gradient Colours:
- 5%: #eaeff2
- 24%: #bfe4ff
- 55%: #ceceff
- 77%: #dfd1f9
- 93%: #e6e3f5
- 100%: #eaeff2
- Gradient Sort: Elliptical
- Gradient Place: Backside Proper
Now let’s open the Telehealth structure and add the background gradients. You possibly can paste the background gradient to a module, part, or row by clicking the three dots or right-clicking within the part settings and choosing Paste Background. You may as well paste the background with the keyboard shortcut Ctrl + Alt + V when you hover over the module.
Begin by including the gradient background to the “Reinventing the Wheel” part.
For the “Some Things are Easier From the Couch” part, set the background gradient place to Prime Proper in order that it blends with the part above.
- Gradient Place: Prime Proper
Subsequent, add the background gradient to every of the round blurb modules surrounding the picture.
We have to regulate the textual content and icon colour for these blurbs in order that they stand out towards the background gradient.
Subsequent, add the background gradient to the “Become a Member Today” row and the testimonial modules within the subsequent part.
Lastly, add the background gradient to the footer, and also you’re completed!
Now let’s check out the ultimate design with the pastel background gradients.
Divi’s gradient builder makes it simple to design stunning gradients so as to add to your web site. With countless design prospects, you’ll be able to create distinctive backgrounds in only a few clicks. You should utilize the 18 FREE pastel gradients in our structure to get began! If you wish to study extra about Divi’s gradient builder, take a look at our tutorial for combining background gradients with masks and patterns. Have you ever tried Divi’s new gradient builder but? Tell us what you assume within the feedback!