Background Gradient: Add Gradient Effects to Your WordPress Design

We are happy to introduce you to a new feature to Elementor, Background Gradient Effects. There has never been an easier way to add background gradients to your WordPress page designs.

Our Background Gradient feature really simplifies things for you guys. You no longer have to rack your brains with tons of CSS or download Gradient plugins and addons. There is no more need for custom CSS guesswork.

Background Gradients are now done visually, in the Elementor-Easy way.

The Background Gradient feature has been one of the most requested features by our users. This release, along with other releases out today, goes to show you that we take your feedback with the utmost importance and consideration.

background gradient
With Background Gradient, you can easily control the location, angle and colors of the gradient effect, as well as set it as linear or radial.
gradient effect
The gradient effect is also available as a background overlay, giving your videos and images a neat design touch.
Use it on sections or column, like in the example above, which features a gradient form background.
Apart from the obvious use, you can also use this flexible feature to create fun tricks, like the split scene in the above screenshot.

How Background Gradient works

Gradient backgrounds are backgrounds that include two colors, each color transitioning to the other.

Incorporating gradients has been a growing trend in web design. That trend has gotten even more popular, ever since Instagram used it in their new logo last year. The Gradient effect is commonly used by top design brands like InVision, and you can’t miss it when you browse through designer portfolios on Dribbble.

Elementor’s new Gradient feature allows you to create a wide variety of gradients, varying in shape, color and format.

With the Gradient feature, you can easily add background gradient effects to any Elementor section. You select your primary and secondary colors, and the location each one inhabits (from 0 to 100 percent).

You can also set the gradient to be linear or radial, and set the angle of the gradient, from the ‘top to bottom up’ angle to the opposite ‘bottom to top’ angle.

In addition to section gradients, you also have the option to set background overlays as gradients, letting you place them over background images, to give them a special effect.

vertical tabs

Vertical Tabs

We are giving the Tabs widget a flip over, so you can now create vertical, and not just horizontal tabs. We have also added a change to make the tabs mobile responsive so that tabs turn to an accordion menu on mobile devices.

Image Carousel Captions

You now have to option to add text to the bottom of your image carousel. Display the title, caption or description below the image, then customize its alignment, color, and typography.

Add an ID to Every Element

This is an issue that turned up over and over again by the Elementor community, so we decided to follow popular demand, adding ID control to every element. We haven’t given this option until now because an ID should be unique and used once per element, and we wanted to avoid conflicts. This means the responsibility now falls on your hands now to make sure you use a unique ID for every element.

The option to add the CSS ID appears above the CSS Class control, in the advanced tab of every widget, column and section.

1000 elementor memebers

The Elementor Community Keeps on Growing

We are wrapping up the first month of 2017, with Elementor having been downloaded over 300K times, and our Facebook group reaching 1,000 members.

This month included a list of new features, including the Price Table, Revision History, hotkeys, Form improvements, 12 new Pro templates and now, the background gradient effect and the other additions mentioned above.

I’m sure you can’t wait to use the new Background Gradient feature. We invite you to join the Elementors group and share your own gradient rich pages with the rest of the community.

About the Author

Ben Pines
Ben Pines
Elementor evangelist & head of content. Follow me on Twitter

Share on

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

Liked This Article?

We have a lot more where that came from! Join 1,365,209 subscribers who stay ahead of the pack.

By entering your email, you agree to our Terms of Service and Privacy Policy.


50 Responses

  1. Every time Elementor comes up with added features like these, I consider Un-Subscribing!… from the other expensive, bloated page builders I got sucked into.
    This is awesome guys 🙂

  2. Some older folk out there may remember the UK Television series “It Aint Half Hot Mum” in which one of the leading characters often remarks “but I’m an artiste!” Well that’s the feeling engendered by your latest addition to an already excellent product – it’s made me feel all creative!

  3. It’s a great update, nice to see gradient and split apart screens. please write a tutorial on integrating Elementor with WordPress theme so that theme developers can ship Elementor with their theme by default.

  4. This is an impressive feature. I have Pojo themes and Elementor Pro. I would really like to use these features and they are excellent high concept.

    However, I am highly concerned about the page scores of various Internet speed tests. These days, if a site is not mobile friendly and / or takes too long to load, customers are lost.

    I performed some speed tests of various premier themes and packages I own. I have an Excel spreadsheet with the various tests. I can share it with you privately if you wish. The goal is to improve Elementor even further.

      1. I can, and the results are fantastic using Elementor Pro — with gradients! I will share my website page with you so you can look for yourself — it won’t last forever, but you can see the gradients from Elementor (and you can add the gradients to almost any field:

        First the unoptimized results: (unoptimized)

        Site Origin:

        Page speed grade: A (96%)
        YSlow grade: B (80%)
        Page load time: 1.1 s
        Total page size: 154 KB
        Total number of requests: 27

        Google PageSpeed Insights:

        Desktop: 92/100
        Mobile: 79/100


        Performance Grade: B(88)
        Load Time: 479 ms
        Faster than: 97% of tested sites
        Total page size: 146.7 KB
        Requests: 27

        Mobile Friendly Test: Page is mobile-friendly

        Mobile SEO:

        Mobile friendly 100/100
        Mobile speed 79/100 (optimized)
        Site Origin:

        Page speed grade: A (96%)
        YSlow grade: A (96%)
        Page load time: .7 s
        Total page size: 134 KB
        Total number of requests: 9

        Google PageSpeed Insights:

        Desktop: 93/100
        Mobile: 80/100


        Performance Grade: A(98)
        Load Time: 997 ms
        Faster than: 89% of tested sites
        Total page size: 135.2 KB
        Requests: 10

        Mobile Friendly Test: Page is mobile-friendly

        Mobile SEO:

        Mobile friendly 100/100
        Mobile speed 80/100

        Ironically, speed time was slower in the optimized because some of the css files were combined into one and parallel loading actually slowed things down. Nevertheless, this is about as good as any site gets in reality. And Elementor Pro really rocks!

  5. Yes, but is there somewhere I can send it? I’m not certain that you fine folks would want this in public view.

    I do have a plan and perhaps the problem is not Elementor, but the themes that it has provided. There are many considerations and I want to do some testing with the top performing theme I have before sharing any results concerning Elementor Pro.

    I’m afraid that nobody but nobody looks like a strong viable candidate without some serious tweaking, working around the more resolvable problems. Even the bare bones Understrap alpha test with the not yet officially released Bootstrap 4 framework had that impressive a response time (I had to change line height to get it mobile friendly).

    So let me do some more testing and if Elementor is game, I can share….

    1. Hi Upendra,
      Why exactly would you need that? The columns widget is there to allow you to create more intricate layouts wherein one section includes a varying number of columns.

  6. If I want to style 2 columns together I will use section of those 2 columns. Now when we have 7 or 8 columns in a row, how can we group them into 2 or 3 in nested level??

    Or you can check this layout:

    Though it is second level only but somewhere the other we need nesting so we can copy/paste section of two columns, style them etc etc

      1. I would be very happy if Elementor plans to have it. That way I can use Elementor to design at broad level and even minor details without issue. Just this one feature will add tons and tons of flexibility in how we design layouts having every tiny level details.

        Still you have made stunning awesome plugin and I recommend every client I work with.

  7. Have a suggestion on color picker widget:

    Right now our color picker ends with black shade and it is hard to switch bw colors just because of color picker tool. It allows to set color theme or directly put hex and other variants but the user friendly color picker seems odd while using. A more friendly would be to have like how they use in website.

    Example, chose any icon here and edit it’s color in *PNG* shade.

    That color picker is so right to switch colors and may be we can have alpha shade along.

  8. I was also hoping for vertical tabs like this! My goodness. This just keeps rocking my freakin’ world. Elementor is making me want to help photographers build some real websites for once. Honestly makes me debate it in the future. I am just blown away constantly.

  9. I have been using elementor, for around now six month, and it as become my Favorited design tool for design website fast and easy. This feature will rock. You guys are “Just Awesome”

  10. amazing tip but i am stuck on a landing page i am making for a client, it seems php is blocking the css from being rendered properly? … i actually had the gradient applied on my video but i changed the height resolution on php code n it is gone , cant get the grad back even after reversing php changes, reinstaling theme , any help would be greatly appreciated.

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 1,365,209 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.