In this tutorial we’ll learn how to create vibrant gradient backgrounds for our websites. We’ll cover best practices for styling and positioning gradients, as well as provide actionable tips on choosing gradient colors.
The tutorial will cover:
✔︎ Using the Spacer widget to create gradients
✔︎ Custom positioning gradients
✔︎ Responsive settings
✔︎ Using textured images in backgrounds
✔︎ Tips for choosing colors
✔︎ And much more!
Grain Texture background image download
See Also:
Spacer Widget
Responsive 101
Custom Positioning
UI Gradients
Coolers
Hey there, it’s Aviva from Elementor. In today’s Tips & Tricks we’ll learn how to create colorful gradient backgrounds with Elementor to add flair to our websites.
And at the end of the tutorial, we’ll provide tips on how to choose colors for your site, so make sure to watch till the end!
Gradients in backgrounds work well in hero sections, especially those that use typography as a focal point.
For our first example, we’ll begin with a page with a dark background. I’ve already added a section with a few elements.
Now we’ll set the section’s Content Width to Full width. Then, the Height to Min height,100 VH, or viewport height, so that the Section takes up the entire height of the screen. Next set the Column position to stretch so it takes up the full height of the section.
Later, when we position the gradients relative to the column, they will be in the same position at different viewport sizes.
Great, let’s create our first gradient. From the widgets panel, we’ll drag in a Spacer widget. Wait, the Spacer widget? To create gradients?
As you likely know, there are usually several ways to achieve any layout. While we could use a flat image for the background, or a combination of PNG images for the gradients, the Spacer widget:
- Allows us complete control over the gradient colors, position, and responsivity.
- It also allows us to quickly modify these settings at any time.
- And as a bonus, by using Spacer widgets instead of images, our website will load even faster!
Ok, back to our Spacer. First we’ll increase the Space, which refers to the Spacer’s height. Then, in Advanced, under Background, select Gradient. We’ll choose our first color, and drag the opacity slider a little to the left to make our color slightly transparent.
For the second color, we’ll drag the opacity slider all the way to the left to set this color to be completely transparent.
Great. Now we’ll change the Type to Radial.
We’ll change the Location, around 70 generally works best.
And we have our first gradient! Time to position it.
We’ll click Positioning. Set the Width to Custom and change the size. We’ll choose Absolute for Position.
We can click and drag the Spacer anywhere on the page, to position it visually, or type in specific values for precision.
Great, now that we’ve positioned the Spacer, let’s change the stack order, so the Headings in the section will display above the gradient.
Starting with the first heading, we’ll select it, and in Advanced, change the Z index to 2. Do the same for the other headings.
Next we’ll duplicate the Spacer. It’s now stacked underneath the Headings, so to make it easier to select, open the Navigator. Right click the Spacer, and select Duplicate. We’ll double click to rename each Spacer, so we can quickly differentiate between them.
Now, with the second spacer selected, click the Advanced tab, and change the positioning. For this one we’ll change the Horizontal Orientation to be from the Right, then adjust the offset. For the Vertical Orientation, we’ll delete the offset value, which will center it vertically to the column.
Then in Background, we’ll change the first color, and reduce its opacity, as well. Second gradient, done!
Time for the last one! Duplicate the Spacer, and rename it.
Once again, we’ll change the positioning. As well as the Background gradient.
Time to preview. Wow, that looks stunning!
Next we’ll check our responsive settings. Click the responsive icon, and start with the Tablet preview.
We’ll select this spacer, and reposition it.
As mentioned before, one of the advantages of using spacers to create gradients, as opposed to using a background image, is the ability to set each one’s position individually. Since these settings are responsive, as indicated by the viewport icon next to them, we have more control over their positioning on different devices.
Let’s see how it works.As before, we can drag it around for visual placement, or type in our measurements, for precision. We’ll go ahead now, and adjust this Spacers’ positioning, as well. The third spacer looks great as is, so no need to adjust it.
Now we’ll switch to Mobile preview. The size of the spacers is a bit large for this screen size, so back in Content, reduce the Space, which as you’ll recall, controls the Spacer’s height. We’ll return to Positioning and reduce the width, as well as adjust the offsets.
Great. We’ll go ahead now and select and update the size and positioning for each of the other spacers.
Perfect, all set. Let’s move on to our second example, where we’ll use similar gradients, this time on a light background, together with a texture, for a different look.
Before starting, make sure you have a textured background image uploaded to your website. You can use the one we’ve provided in the description, or create your own. Just be sure to use a file with a transparent background.
select the spacers by holding down Command (or control on a PC). Right click copy. In a new tab, we’ll start with a page with a light colored background. We’ll use a Hero section with the same settings as in our first example.Now paste the Spacers into the light page.
Great. Now we’ll reposition them to our liking. Well add an extra gradient, by duplicating this one, and repositioning it as well.
Looking good! And last, but not least, we’ll add a texture to the background. Select the section, and in Style, for the background, we’ll select our Grain image, and set the attachment to Fixed.
If you’d prefer for the whole page to have this background, you can do this in the Page settings instead.
Time to preview! Gorgeous!
As promised, here are some actionable tips to help select beautiful color combinations to use in gradients:
- For the background, choose a neutral color like black, white, or gray, or a color with a low saturation.
- Try free online tools like uiGradients or Coolers to find and create striking gradients.
- Play around with the opacity to soften colors that are overly dominant
- Don’t hesitate to use two Spacers with the same gradient.
- Try overlapping spacers a bit, to create beautiful combinations.
- And most importantly, have fun! Don’t be afraid to experiment, with all the settings, till you get perfect results.
And there you have it. Now you know how to add colorful gradients to your backgrounds to dazzle and engage your visitors.
So go ahead, explore the different options, and create your own vibrant gradient backgrounds. We can’t wait to see what YOU come up with.
Thanks for watching! For more tutorials, subscribe to our Youtube channel. And don’t forget to hit that notification bell.
